jquery插件基础——Form的总结与实例

升级表单HTML表单以支持Ajax，它有两个核心方法 ajaxForm()和ajaxSubmit()。

1、ajaxForm() 和 ajaxSubmit()

以Ajax方式提交，ajaxForm() 和 ajaxSubmit()能不接受参数，或只接收一个参数，参数为option对象或回调函数

• ajax()Form()

ajaxForm()不会提交表单

$(" ").ajaxForm(function(){});

• ajaxSubmit()

ajaxSubmit()会提交表单

$(" ").ajaxSubmit(function(){});

$(" ").submit(function(){
    $(" ").ajaxSubmit();
    return false;//阻止表单默认提交
});

2、options对象

定义一个对象options，然后在对象里设置参数后传递给方法

var options = {
    target:'null',//把服务器返回的内容放入指定元素中
     beforeSubmit:null,//提交前的回调函数，函数名后没有()
     success：null,//提交后的回调函数,函数名后没有()
     url:url ,//默认是form的action，如果申明，则会覆盖
     type：type,//默认是form的method('get' or 'post')，如果申明,则会覆盖
     dataType:null,//'xml','script',or'json' （接受服务端返回的类型）
     clearForm:true,//成功提交后，清除所有 表单元素的值
     resetForm:true,//成功提交后，重置所有表单元素的值
     timeout:null//限制请求的时间，单位为毫秒
}

$("  ").ajaxForm(options);

$(" ").submit(function(){
    $(this).ajaxSubmit(options);
    return false;
});

3、beforeSubmit ：showRequest

提交前的回调函数，返回false会阻止表单的提交

option={
beforeSubmit:showRequest
}

function showRequest(formData,jqForm,options){
return true;//允许表单自动提交
}

• formData

formData是一个数组对象，保存了表单数据，每个对象的都以键/值的形式保存，

{
{name:user,value:userValue}
{name:password,value:passwordValue}
}

转换为字符串的形式如：    name=1&address=2；

function showRequest(formData,jqForm,options){
var queryString=$.param(formData);
return true;
}

• jqForm

jqForm是一个jQuery对象，它封装了表单的元素。把它转化为DOM对象即可访问jqForm的DOM元素

    var formElement =jqForm[0];
    var address = formElement.address.value;

4、success：showResponse

提交后的回调函数

function showResponse(XMLHttpRequest,statusText){
    alert('状态'+statusText+'\n 返回的内容是：\n'+responseText);
}

statusText只是一个返回状态，例如success、error等。 

responseText服务器返回的数据内容，根据options对象中的dataType属性来返回相应格式的内容，默认为responseText

• xml 

当dataType为xml时，回调函数的第1个参数是XMLHttpRequest对象的responseXML属性。

$("#xmlForm").ajaxForm({
    dataType:'xml'，success:processXml
});
function processxml(responseXML){
    var name=$('name'，responseXML).text();var address=$('address',responseXML).text();
    $('#xmlOut').html(name+"　＂＋address);
}

• json

当dataType为json时，回调函数的第1个参数是从服务器返回的json数据对象

$('#myForm').ajaxForm({
    dataType:'json',
    success:processJson
});
function processJson(data){
    $('#jsonOut').html(data.name+" "+data.address);
}