ajax實現表單提交不跳轉

通過ajaxSubmit()函數和<form>的onsubmit實現。

首先要引入jquery.form.js才能使用ajaxSubmit()函數

<script type="text/javascript" src="<?php echo JS_URL;?>jquery.form.js"></script>

html:

<form id="showDataForm" action="<?php echo SITE_URL;?>/test/ajaxTest" method="post" οnsubmit="return saveReport();">
名稱：<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>

js:

<script type="text/javascript">
//$("form").submit(function() {return false;}); // 禁用 form 提交，頁面不會跳轉
function saveReport() { 
// jquery 表單提交 
$("#showDataForm").ajaxSubmit(function(message) { 
// 對於表單提交成功後處理，message爲提交頁面saveReport.htm的返回內容 
alert(message);
}); 
return false; // 必須返回false，否則表單會自己再做一次提交操作，並且頁面跳轉 
} 
</script>