利用ajaxSubmit()实现Form表单submit()提交后的回调函数

版权声明：本博客为本人工作遇到问题解决方案或学习笔记，若有错误或不足，欢迎留言交流。 https://blog.csdn.net/zorro_jin/article/details/81042198

1、引入JQuery Form表单的js

[code]<script type="text/javascript" src="${ctxStatic}/common/jquery.form.js"></script>

下载链接：jquery.form.js  密码：fqr9 

2.设置相应的参数

[code]$(function(){
    // 1.基本参数设置
    var options = {
        type: 'POST',     // 设置表单提交方式
        url: "${ctx}/jinzhu/dtUser/save",    // 设置表单提交URL,默认为表单Form上action的路径
        dataType: 'json',    // 返回数据类型
        beforeSubmit: function(formData, jqForm, option){    // 表单提交之前的回调函数，一般用户表单验证
            // formData: 数组对象,提交表单时,Form插件会以Ajax方式自动提交这些数据,格式Json数组,形如[{name:userName, value:admin},{name:passWord, value:123}]
            // jqForm: jQuery对象,，封装了表单的元素   
            // options: options对象
            var str = $.param(formData);    // name=admin&passWord=123
            var dom = jqForm[0];    // 将jqForm转换为DOM对象
            var name = dom.name.value;    // 访问jqForm的DOM元素
            /* 表单提交前的操作 */
            return true;  // 只要不返回false,表单都会提交 
        },
        success: function(responseText, statusText, xhr, $form){    // 成功后的回调函数(返回数据由responseText获得)
            if (responseText.status == '1') {
                alert("操作成功!" + responseText.msg);
                /* 成功后的操作 */
            } else {
                alert("操作失败!" + responseText.msg);    // 成功访问地址，并成功返回数据，由于不符合业务逻辑的失败
            }
        },  
        error: function(xhr, status, err) {            
            alert("操作失败!");    // 访问地址失败，或发生异常没有正常返回
        },
        clearForm: true,    // 成功提交后，清除表单填写内容
        resetForm: true    // 成功提交后，重置表单填写内容
    };
   
    // 2.绑定ajaxSubmit()
    $("#inputForm").submit(function(){     // 提交表单的id
        $(this).ajaxSubmit(options);
        return false;   //防止表单自动提交
    });
});

3、项目中使用--示例(基于Jeeplus)

[code]var validateForm;
function doSubmit(){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
if(validateForm.form()){
$("#inputForm").submit();
return true;
}
return false;
}

$(document).ready(function() {
validateForm = $("#inputForm").validate();
});

$(function(){
var options = {
type: 'POST',
success:showResponse,
dataType: 'json',
error : function(xhr, status, err) {
alert("操作失败");
}
};

$("#inputForm").submit(function(){
$(this).ajaxSubmit(options);
return false;   //防止表单自动提交
});
});

function showResponse(responseText, statusText, xhr, $form){
if (responseText.success == true) {
parent.layer.msg(responseText.msg, {icon:6});
} else {
parent.layer.msg(responseText.msg, {icon:5});
}
}

 

 

阅读更多