【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("网络错误,保存失败!");
}
});
}
这样既接收到后台响应,又可以把对话框关闭,并且弹出我们需要的提示信息。
先来看下原来的代码:
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("网络错误,保存失败!");
}
});
}
这样既接收到后台响应,又可以把对话框关闭,并且弹出我们需要的提示信息。
相关文章推荐
- Form表单中的button导致页面刷新而无法进入Ajax请求回调函数
- Extjs6关于Ajax和form表单提交以及store请求session超时的处理方法
- 通过form的action属性提交表单并接收处理返回值的方法(页面不跳转)
- 【原创】php将form表单多次请求的内容保存到txt并显示到form所在的页面
- 当有多个form表单请求时如何处理?
- JS中ajax请求提交form表单
- 同一页面无法多次使用XmlHttp发起Ajax请求
- 关于esayui ajax前台form表单传值后台springmvc页面报400错误
- Ajax提交Form表单页面仍会刷新问题
- 关于jQuery使用serializeArray()序列化表单数据,使用FormData()实现AJAX请求的问题
- 对于ajax请求,后端不能直接返回页面的处理方式
- ASP.NET后台输出js大全,页面顶部、form表单中前面与后面、和UpdatePanel(ScriptManager、AJAX)输出JS
- java如何区分是form表单请求,还是ajax请求
- [转载]同一页面无法多次使用XmlHttp发起Ajax请求的真实原因
- 处理jquery的ajax请求session过期跳转到登录页面
- 页面ajax提交form 表单 以及后台接收
- 在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
- ajax前置处理实现异步请求session过期时跳转登录页面
- jquery序列化form表单使用ajax提交后处理返回的json数据
- 【Ajax】--同一页面无法多次使用XmlHttp发起Ajax请求的真实原因