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>