Jquery.Form 非同步提交表單的簡單實例_jquery

http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html#

1. 在你的頁面裡寫一個表單。一個普通的表單，不需要任何特殊的標記：

複製代碼 代碼如下:

代碼如下:

Name:  
Password:

在沒有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 ;
           }
       }


驗證使用者名稱是否為空，以提示輸入，並取消表單提交。