記錄我jquery from的學習筆記，也是借鑑了好幾個人的部落格，在此謝過，並補充一些沒有提到的內容：

相關js：

jquery form是一個表單非同步提交的外掛，可以很容易提交表單，設定表單提交的引數，並在表單提交前對錶單資料進行校驗和處理和表單提交後的函式呼叫。

表單程式碼：

<form id="form1" method="get" action="/day09/jqueryFormServlet">
姓名:<input name="name" id="name" class="specialFields"><br>
年齡:<input name="age" 
 
id="age" type="number" class="specialFields"><br>
地址:<input name="address" id="address"><br>
興趣:<p>
h1:<input type="checkbox" name="hobby" value="h1" checked="checked">
h2:<input type="checkbox" name="hobby" value="h2">
h3:<input type="checkbox" name="hobby" 
 
value="h3">
h4:<input type="checkbox" name="hobby" value="h4">
        </p>
性別:
    男:<input type="radio" name="sexuality" value="man" checked="checked"><br>
女:<input type="radio" name="sexuality" value="girl"><br>
    <input type="submit" value="submit1" id=
 
"sub1">
    <input type="submit" value="submit2" id="sub2">
    <div id="p1">p</div>
</form>

這個外掛有兩個主要方法：

ajaxForm() 和 ajaxSubmit()， 它們集合了從控制表單元素到決定如何管理提交程序的功能；

他們都可以接受0個或一個引數，引數可以為一個函式或者一個JS物件，類似json格式；

ajaxForm（）不能提交表單，只是為表單提交做準備：

①：傳入函式

$("#form1").submit(function () {
    $('#form1').ajaxForm(function () {
        alert("提交成功2")
    })
})

但是雖然我看了很多部落格都是這樣寫，我實際程式碼執行之後發現，“提交成功2”並沒有列印，也就是函式沒有進去，

var options = {
    url: "/day09/jqueryFormServlet", //提交地址：預設是form的action,如果申明,則會覆蓋
type: "post",   //預設是form的method（get or post），如果申明，則會覆蓋
beforeSubmit: beforeCheck, //提交前的回撥函式
success: successfun,  //提交成功後的回撥函式
target: "#output",  //把伺服器返回的內容放入id為output的元素中
dataType: "json", //html(預設), xml, script, json...接受服務端返回的型別
clearForm: true,  //成功提交後，是否清除所有表單元素的值
resetForm: true,  //成功提交後，是否重置所有表單元素的值
timeout: 3000     //限制請求的時間，當請求大於3秒後，跳出請求
};

②：傳入一個js物件

$('#form1').ajaxForm(options)

ajaxSubmit（）方法：實現表單的非同步提交

$("#form1").submit(function () {
    $('#form1').ajaxSubmit(function () {
        alert("提交成功2")
    })

    return false;
})

這裡必須返回false，不然表單會提交兩次，因為非同步提交一次，預設提交一次；

$('#form1').ajaxSubmit(options)

但如果傳入options物件則只會提交一次，目前我不知道什麼原理。

//表單提交前，資料校驗
/*
 * formData：表單元素陣列物件，數組裡面每一個元素都是一個<input>元素，可以通過.name、.value的方式訪問元素 * 提交表單時，Form外掛會以Ajax方式自動提交這些資料，格式如：[{name:user,value:val },{name:pwd,value:pwd}]
 * form: jQuery物件，封裝了表單的元素 * options: options物件 * */
function beforeCheck(formData, form, options) {

    //利用formData校驗
//$.param(formData) 可以和formSerialize方法一樣，實現表單元素的序列化
var queryString = $.param(formData);
$("#p1").html(queryString + "<br>")

    for (var i = 0; i < formData.length; i++) {
        //列印每一個元素的name屬性和value值
//alert(formData[i].name + "  " + formData[i].value)
}

    //利用form校驗
var formDom = form[0];
//formDom是jQuery表單物件，感覺類似陣列，可以通過下標訪問元素
//比如：formDom[0].targetName 表示元素標籤名，INPUT
var name = formDom["name"].value;//這裡尋找name為name或者id為name的元素的值
var age = formDom["age"].value;
alert(name+"  "+age)
    if (!name || !age) {
        alert("name age 不能為空")
    }

    //利用fieldValue校驗
//返回選擇元素的value值，是一個數組
var name = $("input[name='name']").fieldValue();
var hobby = $("input[name='hobby']").fieldValue();
if (!name[0] || !hobby[0]) {
        alert("必須填姓名和選擇興趣")
    }

    //把表單的元素序列化，：name=姓名&age=年齡；以字串的方式拼接所有表單元素
var formSerializeStr = $("#form1").formSerialize();
alert(formSerializeStr)
    //序列化某些表單元素 $("#form1 .ss")通過選擇器選擇某些元素
//這裡就是選擇表單裡面，有specialFields樣式的元素；但是這裡我用屬性選擇器沒有生效，比如$("#form1[name='name']")
var formSerializeStr = $("#form1 .specialFields").fieldSerialize();
alert(formSerializeStr)


    return true;//如果return false，則校驗不通過，表單不會提交
}

function successfun(data, status) {
    //data是提交成功後的返回資料，status是提交結果 比如success
    //返回資料的型別是通過options物件裡面的dataType定義的，比如json、xml，預設是html
    //這裡data.success是因為我後天返回的json資料的一個屬性 String jsonText = "{'success':'提交成功'}";
alert(data.success + "  " + status)
}

一、jQuery.Form.js 配置選項options

二、可操作函式