jquery提交form表单插件jquery.form.js

//jquery ajax 方式提交表单
    var $form = $("#form"),
        action = $form.attr("action");
    $form.on("submit",function(){
        $.post(action,$form.serialize(),function(res){
            //请求成功代码在这里
            alert("提交成功！");
        },'json');
        return false
    });
====================================

//jquery.form.js 的ajax提交表单
$('#form2').submit(function() {
        $(this).ajaxSubmit(function() {
            alert("提交成功！");
        });
        return false; //阻止表单默认提交
    });

jquery.form.js中ajaxSubmit()可以像上面代码一样只传递一个成功的回调函数，也可以传递更多参数，参数如下：
//jquery.form.js 中的ajaxSubmit() 可以是一个回调函数或者是更多参数，如下：
    var options = {
        //url: url,                 //默认是form的action
        //type: type,               //默认是form的method（get or post）
        //dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型
        //clearForm: true,          //成功提交后，清除所有表单元素的值
        //resetForm: true,          //成功提交后，重置所有表单元素的值
        //target: '#output',          //把服务器返回的内容放入id为output的元素中
        //timeout: 3000,               //限制请求的时间，当请求大于3秒后，跳出请求
        //提交前的回调函数
        beforeSubmit: function(formData, jqForm, options){
            //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
            //jqForm:   jQuery对象，封装了表单的元素
            //options:  options对象
            //比如可以再表单提交前进行表单验证
        },
        //提交成功后的回调函数
        success: function(data,status,xhr,$form){},
        error: function(xhr, status, error, $form){},
        complete: function(xhr, status, $form){}
    };

====================
下面我们来一段jquery.form表单提交的实战例子完整代码：
$('#formLogin').on("submit",function() {
//懒人建站整理
        $(this).ajaxSubmit(
            {
                //url: url,                 //默认是form的action
                //type: type,               //默认是form的method（get or post）
                //dataType: "json",           //html(默认), xml, script, json...接受服务端返回的类型
                //clearForm: true,          //成功提交后，清除所有表单元素的值
                //resetForm: true,          //成功提交后，重置所有表单元素的值
                target: '#output',          //把服务器返回的内容放入id为output的元素中
                //timeout: 3000,               //限制请求的时间，当请求大于3秒后，跳出请求
                //提交前的回调函数
                beforeSubmit: function(arr,$form,options){
                    //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
                    //jqForm:   jQuery对象，封装了表单的元素
                    //options:  options对象
                    //比如可以再表单提交前进行表单验证
                    console.log("beforeSubmit",arr,$form,options)
                },
                //提交成功后的回调函数
                success: function(data,status,xhr,$form){
                    console.log("success",data,status,xhr,$form);
                    if(data.Flag){
                        console.log(data.Content)
                    }
                },
                error: function(xhr, status, error, $form){
                    console.log("error",xhr, status, error, $form)
                },
                complete: function(xhr, status, $form){
                    console.log("complete",xhr, status, $form)
                }
            }
        );
        return false; //阻止表单默认提交
    });

查看jquery.form示例

懒人建站整理编辑