送出表單 form submit 不跳轉實作

第一種方式

$(function() {
$("form").submit(function() {return false();}); // 禁用 form 送出，頁面不會跳轉
$("form input[type='submit']").click(function(){
    var url = $('form').attr('action'); // 取Form中要送出的連結
    var param = {}; // 組裝發送參數，下面隻是舉個例，請按需要修改
    param['name']  = $('form input[name=name]').val();
    param['age'] = $('form input[name=age]').val();
    ……
    $.post(url, param, function(dom) {  // 用POST方法送出，如為GET方法則改為$.get
       $('div.get').html(dom);  // 顯示傳回内容至class為.get的DIV，可改為你自己的處理方法
    }) ;  
}); 
});      

第二種方式：

點選submit按鈕或直接回車可以将資料送出到saveReport頁面，但是送出後也會跳轉到saveReport頁面 

如何做到 

将資料送出到saveReport（form的action指向）頁面，但是頁面又不進行跳轉，即保持目前頁面不變呢？？ 

這種需要在load一個頁面的時候尤其迫切。 

利用jquery的ajaxSubmit函數以及form的onsubmit函數完成，如下： 

複制代碼代碼如下:

<form id="saveReportForm" action="saveReport.htm" method="post" οnsubmit="return saveReport();"> 

<input type="submit" value="儲存報告"/> 

</form> 

form增加一個id用于在jquery中調用，增加一個onsubmit函數用于submit前自己送出表單 

saveReport對應函數為 

複制代碼代碼如下:

function saveReport() { 

// jquery 表單送出 

$("#showDataForm").ajaxSubmit(function(message) { 

// 對于表單送出成功後處理，message為送出頁面saveReport.htm的傳回内容 

}); 

return false; // 必須傳回false，否則表單會自己再做一次送出操作，并且頁面跳轉 

}