jQuery基础学习07 jQuery表单插件-Form

Posted 2020-06-13

作用：jQuery Form插件的作用是为了让我们可以很方便地用ajax的方式提交表单，从而使我们提交表单的时候页面不用进行刷新。

它的核心方法是ajaxForm()和ajaxSubmit()

升级表单提交方式的时候很简单，不用去改变html结构，如下即可：

　　//就是下面这么简单
    $("#myForm").ajaxForm(function(){
        //提交成功后的操作
    });
    //你也可以这样
    $("#myform").submit(function(){
        $(this).ajaxSubmit(function(){
            //提交成功后的操作
        });
        return false;//阻止表单默认提交
    });

提交表单的时候不仅可以像上面的例子那样，给ajaxForm和ajaxSubmit传递一个回调函数，还可以传递一个options对象。

定义了一个options如下：

var options={
    target:"#output1",//把服务器返回的内容放入id为output1的元素中
    beforeSubmit:function(formData,jqForm,options){//提交前的回调函数
        //formData为数组对象，即提交的数据
        //jqForm是一个jQuery对象，封装了表单元素
        //options就是options对象
        //在这个回调函数里，返回false会阻止表单提交
    }
    success:function(responseText,statusText,xhr,$form){//提交后的回调函数
        //statusText是返回状态，值为success和error等
        //responseText携带服务器返回的的数据内容。
        //会根据datatype的类型来返回相应格式的内容
        //对于缺省值：返回的是XMLHttpRequest对象的responseXML属性
    },
    url:url,            //默认为form的action，如果申明，就用url
    type:type,            //默认为form的method（post或get），如果申明，就覆盖
    dataType:null,        //服务端返回的类型
    clearForm:true,        //成功提交后，清除所有表单元素的值
    resetForm:true,        //成功提交后，重置所有表单元素的值
    timeout:3000        //限制请求的超时时间，大于3秒，跳出请求
}
$("myForm").ajaxForm(options);