ajax提交form

Jquery的$.ajax方法能夠實現ajax調用，要設置url,post,參數等。

若是要提交現有Form須要寫不少代碼，何不直接將Form的提交直接轉移到ajax中呢。

之前的處理方法

如Form代碼以下：

<form id="Form1" action="action.aspx" method="post" > 名稱：<input name="name" type="text" /><br /> 密碼：<input name="password" type="password" /><br /> 手機：<input name="mobile" type="text" /><br /> 說明：<input name="memo" type="text" /><br /> <input type="submit" value="提 交" /> </form>

當提交後，會跳轉到action.aspx頁面。並能夠經過Request.Params["name"]能夠取到值。

思考

若是不想刷新頁面使用ajax，就又要在$.ajax中指定url,等信息，很差維護。

在網上查了一下，老早之前老外就有解決方案了。使用ajax直接按照Form信息直接提交。不刷新頁面。

參考資料：http://jquery.malsup.com/form/

很好用，但我仍是願意本身寫個本身用的。

核心JS代碼

//將form轉爲AJAX提交 function ajaxSubmit(frm, fn) { var dataPara = getFormJson(frm);
    $.ajax({
        url: frm.action,
        type: frm.method,
        data: dataPara,
        success: fn
    });
} //將form中的值轉換爲鍵值對。 function getFormJson(frm) { var o = {}; var a = $(frm).serializeArray();
    $.each(a, function () { if (o[this.name] !== undefined) { if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    }); return o;
}

ajaxSubmit方法第一個參數，是要提交的form，第二個參數是ajax調用成功後的處理函數。

將form的action傳遞給ajax的url，form的method傳遞給ajax的type，再將格式化後的表單內容傳遞給data。

getFormJson方法將form的元素轉化爲json格式鍵值對。形如：{name:'aaa',password:'tttt'}，注意將同名的放在一個數組裏。

調用

//調用 $(document).ready(function(){
    $('#Form1').bind('submit', function(){
        ajaxSubmit(this, function(data){
            alert(data);
        }); return false;
    });
});

在ajaxSubmit方法調用前，可驗證數據是否正確，在alert(data)處可加入本身調用返回後處理代碼。

在調用ajaxSubmit方法後，必須添加return false;語句防止Form真實提交。