http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#
1. 在你的頁面裡寫一個表單。一個普通的表單，不需要任何特殊的標記：
在沒有Jquery.Form元件的時候，提交表單，頁面會進入阻塞模式，等待伺服器端的回應。
2. 引入jQuery和Form Plugin Javascript腳本檔案並且加入幾句簡單的程式碼讓頁面在DOM載入完成後初始化表單：
加上jquery.form元件後，提交表單時，頁面不會再同步提交，而是由js做非同步提交，因此提交後頁面不會有刷新。
3. 加入能夠與伺服器端互動的回呼函數。
$(document).ready(function () {
//options是ajaxForm的配置物件。?
var options = { // 要使用伺服器回應更新的目標元素
//beforeSubmit: showRequest, // 提交前回呼
succ 🎜> // 其他可用選項：
//url: url type // 'get' 或'post'，覆蓋對於表單的'method'屬性
//dataType: null // 'xml'、'script' 或'json'（預期伺服器回應型別） // resetForm: true // 成功後重設表單
// 這裡也可使用$.ajax 🎜>
/ / 使用'ajaxForm' 綁定表單
$('#myForm').ajaxForm(options);
});
// responseText是服務端的回應值。 statusText是頁面
// 提交狀態值，success表示成功。
function callBackFunc(responseText, statusText) {
if (statusText == 'success') {
其他{
alert(“服務端錯誤！”);
} }
如果回傳的是json資料則回呼函數可以這麼寫
function resultFunction(responseText,statusText) {
) {
alert('與錯誤！'); } }
}
服務端的程式碼如下：
複製程式碼
程式碼如下:
[HttpPost]
public ActionResult AjaxForm(FormCollection 表單)
{
"] " PWD: " form["密碼」] ;
//回傳內容(訊息);
return Json(new { code = 1, message = message });
}
4. 加入提交前的數據校驗函數
為options對象添加beforeSubmit屬性
var options = {
//target: '#output1', // 000>beforeSubmit: checkData, // 預先提交回調
; //url: url // 覆蓋表單的'action' 屬性 伺服器回應類型）
//clearForm: true / / 成功後清空所有表單欄位
// 這裡也可以使用$.ajax 選項，例如：
// //逾時： 3000
Data, jqForm, options) {
// formData 是一個陣列；這裡我們使用$. param 將其轉換為字串以顯示它
//為對它提交資料時會自動為您執行此操作
// jqForm 是封裝表單元素的jQuery 物件。要存取
// 表單的DOM 元素，請執行下列操作：
var 即將提交：nn' queryString);
// 這裡我們可以返回false 阻止表單提交；
// > if ($(formElement ).find("#username").val() == "") {
Alert("請輸入使用者名稱！"); 回復true ;
}
}
驗證使用者名稱是否為空，以提示輸入，並取消表單提交。
