jquery表單應用

有必要獲取表單內各input元素的資料，然後用ajax方法以POST方式提交給伺服器。如果input元素有ID屬性，假設是，可以這樣獲取：

var writervalue=$(”#writer”).val();

再來一個按扭吧，點選按鈕後POST到ok.php去。

先不考慮用submit提交表單，因為有jquery的Form外掛可以近乎完美地完成表單的提交。這是個很強大的外掛……

$(document).ready(function(){        //DOM的onload事件處理函式
  $(”#button”).click(function(){          //當按鈕button被點選時的處理函式
    postdata();                                      //button被點選時執行postdata函式
  });
});

function postdata(){                             //提交資料函式
  $.ajax({                                                 //呼叫jquery的ajax方法
    type: “POST”,                                     //設定ajax方法提交資料的形式
    url: “ok.php”,                                      //把資料提交到ok.php
    data: “writer=”+$(”#writer”).val(),    //輸入框writer中的值作為提交的資料
    success: function(msg){                 //提交成功後的回撥，msg變數是ok.php輸出的內容。
      alert(”資料提交成功”);                     //如果有必要，可以把msg變數的值顯示到某個DIV元素中
    }
  });
}

大功告成！假如輸入框很多，在ajax方法的data引數裡可以這樣表示：

data:”n1=&n2=&n3=…”

jquery的Form外掛可以輕鬆而且不引發頁面重新整理地提交表單，所以這個外掛被很多開發人員使用（外掛需要在jquery庫之後載入）。這個外掛提供一個formToArray方法獲得表單中所有元素的值的陣列，可以這樣做：

var data = $(”#myForm”).formToArray();
$.post( “ok.php”, data );

變數data事實上是個陣列。變數通過jquery的post方法提交到ok.php。

看上去用post方法要比ajax方法省事。jquery的ajax方法是low-level（底層）處理機制，而post、get、方法則是higher-level（高層）處理機制，已經被封裝好了的，更容易理解和使用。但也有缺點，就是不能返回更詳細的資訊，比如錯誤處理……

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-553565/，如需轉載，請註明出處，否則將追究法律責任。