詳解Ajax請求（三）——jQuery對Ajax的實現及serialize()函數對於表單域控件參數提交的使用技巧

　　原生的Ajax對於異步請求的實現並不好用，特別是不同的瀏覽器對於Ajax的實現並不完全相同，這就意味着你使用原生的Ajax做異步請求要兼顧瀏覽器的兼容性問題，對於java程序員來講這是比較頭疼的事情，還好jQuery的出現幫我們解決了兼容性的問題，而且讓異步請求的實現更加簡單直觀。

　　總結下來，jQuery對於Ajax的實現常用的方法一共有三個，分別是：$.ajax(),$.get(),$.post()，其中$.get()和$.post()方法分別是對$.ajax()方法的j簡寫。至於這三個方法的使用細節可以參考：http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp。本文主要對使用jquery發送ajax時表單元素參數提交的技巧進行說明。

　　我們來看一個使用場景：

<input type="button" id="testBtn" value="測試按鈕" onclick="sentAjax();"/><br>
<form action="" id = "formId">
<input type="text" name = 'name'  id="NAME"/><br>
<input type="text" name = 'id' id="ID" /><br>
</form>

　　要求發送ajax請求時提交id為NAME和ID的表單元素我們先看一下傳統的做法。

function sentAjax(){
    
    var name = $("#NAME").val();
    var id = $("#ID").val();
    
    var sendData = "name=" + name + "&id=" + id;
    
    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: sendData,
          success: function(getData){
              
          }
        });
 }

　　我們發現使用傳統的做法要對表單控件逐個進行取值並且還要進行字符串的拼接（當然，如果你data用的是json格式就不用進行字符串拼接了，但還是免不了逐個進行取值），我們再看看使用jquery的serialize()方法是怎么做的。

　　

function sentAjax(){
    var formParam = $("#formId").serialize();
    alert(formParam);

    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: $("#formId").serialize(),
          success: function(getData){
              
          }
        });
 }

　　

　　我們發現使用serialize()函數讓我們免去了對表單控件逐個進行取值並且還要進行字符串的拼接的麻煩。serialize()函數底層對表單元素做了序列化的處理，同時serialize()函數允許我們選擇一個或多個表單元素（比如 input 及/或 文本框），或者 form 元素本身。我們再來看看下面的應用場景

　　

<input type="button" id="testBtn" value="測試按鈕" onclick="sentAjax();"/><br>

<form action="" id = "formId">
<input type="text" name = 'name'  id="NAME"/><br>
<input type="text" name = 'id' id="ID" /><br>
<input type="checkbox"  name="ck" value="1"/><br>
<input type="checkbox"  name="ck" value="2"/><br>
<input type="checkbox"  name="ck" value="3"/><br>
<input type="checkbox"  name="ck" value="4"/><br>
</form>

 

　　要求發送ajax請求時提交已選中的name為'ck'的復選框，其它的表單元素不做提交。按照傳統的做法代碼我們要這么寫。

function sentAjax(){
    
    var selectedCheckbox = $(":checkbox[name=ck]:checked");
    
    var sendDatas = "";
    
    $.each(selectedCheckbox,function(index,item){
        sendDatas += "&ck=" + item.value;
    });
    
    sendDatas = sendDatas.substring(1);
    
    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: sendDatas,
          success: function(getData){
              
          }
        });
 }

 

　　再來看看使用serialize()函數的做法，代碼寫起來就很簡單。

function sentAjax(){
    
    var sendDatas = $(":checkbox[name=ck]:checked").serialize();

    $.ajax({
          type: 'POST',
          url:"<%=basePath%>/manage/test/ajax",
          data: sendDatas,
          success: function(getData){
              
          }
        });
 }

 

　這里提幾點需要注意的，

　（1）使用serialize()函數時，要序列化的表單元素不一定非要在<form></form>標簽中，如果你只是要序列化某個<form></form>標簽下的表單元素，其它<form></form>下的表單元素或者<form></form>外的表單元素不做序列化，就要使用以下的語句（注意冒號前面的空格不能少，這里用到了jQuery的層級選擇器）。

var params = $("#formId :checkbox[name=ck]:checked").serialize();

　（2）：對於復選框（checkbox)使用serialize()函數進行序列化時，只能序列化被選中的復選框如下寫法不能序列化未選中的復選框（這種寫法序列化的也只能是選中的復選框，若是想發送ajax請求時提交未選中的的復選框，請參照傳統的寫法對所有的復選框按照checked屬性進行過濾）。

var params = $("#formId :checkbox[name=ck]").serialize();

 

參考文章：http://www.w3school.com.cn/jquery/ajax_serialize.asp

 

 最后說一點，我們作為程序員，研究問題還是要仔細深入一點的。當你對原理了解的有夠透徹，開發起來也就得心應手了，很多開發中的問題和疑惑也就迎刃而解了，而且在面對其他問題的時候也可做到觸類旁通。當然在開發中沒有太多的時間讓你去研究原理，開發中要以實現功能為前提，可等項目上線的后，你有大把的時間或者空余的時間，你大可去刨根問底，深入的去研究一項技術，為覺得這對一名程序員的成長是很重要的事情。