您的位置:首页 > Web前端 > JQuery

【JQuery easyui】 $.modalDialog 内嵌的页面form表单发起ajax请求处理

2018-02-08 09:02 363 查看
昨天下午某项目遇到一个问题,modalDialog内嵌的页面使用form表单发起ajax请求,原来的代码是在$.modalDialog组件设置一个提交按钮,但是奇怪的问题现象是,后台返回的响应json却接收不到,于是我就想到了,由于是内嵌的页面发起form表单请求,响应应该返回到该内嵌页面才能够做处理,于是就研究了很长时间,最终问题解决。
   先来看下原来的代码:
var dialog = $.modalDialog({
title : '修改信息',
width : 400,
height : 450,
href : 'edit.jsp',
resizable : true,
onLoad : function() {
var f = $.modalDialog.handler.find("#form");
if (result.rows) {
var data = result.rows[0];
f.form('load', data);
transDetailTemp.edit_currency = data.currency;
transDetailTemp.edit_direction = data.direction;

transDetailTemp.init();
}
},
buttons : [
{
text : '提交',
iconCls:'icon-edit',
handler : function() {
$.modalDialog.openner = $grid;
    $('#form').form('submit', {
      url: baseUrl+ "/importDetail",
      onSubmit: function () {        //表单提交前的回调函数
        var isValid = $(this).form('validate');//验证表单中的一些控件的值是否填写正确,比如某些文本框中的内容必须是数字
        if (!isValid) {
        }
        return isValid; // 如果验证不通过,返回false终止表单提交
      },
      success: function (data) {  //表单提交成功后的回调函数
        $.modalDialog.handler.dialog('destroy');
                  $.modalDialog.handler = undefined;
                      $.messager.show({
                          title : '提示',
                          msg: data.desc ? data.desc : data.retMsg
         });
      }
});

}
},
{
text : '取消',
iconCls : 'icon-cancel',
handler : function() {
$.modalDialog.handler.dialog('destroy');
$.modalDialog.handler = undefined;
}
}
]
});

根据上面的代码我做了调整
var dialog = $.modalDialog({
title : '修改信息',
width : 400,
height : 450,
href : 'edit.jsp',
resizable : true,
onLoad : function() {
var f = $.modalDialog.handler.find("#form");
if (result.rows) {
var data = result.rows[0];
f.form('load', data);
transDetailTemp.edit_currency = data.currency;
transDetailTemp.edit_direction = data.direction;

transDetailTemp.init();
}
},
buttons : [
{
text : '提交修改',
iconCls:'icon-edit',
handler : function() {
$.modalDialog.openner = $grid;
editPlus();
}
},
{
text : '取消',
iconCls : 'icon-cancel',
handler : function() {
$.modalDialog.handler.dialog('destroy');
$.modalDialog.handler = undefined;
}
}
]
});
在edit.jsp页面我写了个函数:
function editPlus(){
$.ajax({
type : 'POST',
url : baseUrl+ "/importDetail",
data : JSON.stringify({
transDate : $('#transDate').val(),
transTime : $('#transTime').val(),
flowNo : $('#flowNo').val()

}),
dataType : "json",
contentType : "application/json;charse=UTF-8",
success : function(data) {
$.modalDialog.handler.dialog('destroy');
$.modalDialog.handler = undefined;
$.messager.show({
title : '提示',
msg: data.desc ? data.desc : data.retMsg
});
},
error:function(data){
console.log(data);
alert("网络错误,保存失败!");
}
});
}
这样既接收到后台响应,又可以把对话框关闭,并且弹出我们需要的提示信息。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: