jquery.form.js提交form表单 上传文件

jquery.form.js提交form表单插件提供了表单ajaxe提交解决方案,下面对比一下使用jquery自己的ajax提交和jquery.form的提交由啥不同。
通常没有使用jquery.form插件的情况下我们可以像下面代码来提交表单:
//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)