我想使用ajax提交我的表单,这是我的php代码:
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<script type='text/javascript' src="./js/jquery.min.js"></script>
<script>
$(function(){
$("button#submitButton").click(function(e){
var frm = $("#testForm");
frm.submit(function(ev){
var smt = $("#submitButton");
$.ajax({
type : frm.attr('method'),
url : frm.attr('action'),
data : frm.serialize(),
success : function(d){
alert(d);
}
});
ev.preventDefault();
});
});
});
</script>
</head>
<body>
<form id='testForm' action='process.php' method = 'post'>
<label for='test1'>test1</label>
<input name='test1' id='test1'></input>
<button id='submitButton'>submit</button>
</form>
</body>
</html>
当我第一次点击按钮时,它运行良好,预期的消息会被提醒,然而,如果我再次点击按钮,消息会被警告两次,如果我第三次点击按钮,信息会被提醒三次。为什么它会这么做?
在您的案例中,每次单击按钮都会向表单添加一个新的表单提交处理程序,因此当第二次单击按钮时,会有2个提交处理程序添加到表单中,因此ajax代码会执行2次,下一次单击时会有3个处理程序注册,因此ajax会执行3次。
由于该按钮在表单中,默认情况下单击它将触发表单提交,因此您可以直接注册表单提交处理程序。
$(function () {
var frm = $("#testForm");
frm.submit(function (ev) {
var smt = $("#submitButton");
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (d) {
alert(d);
}
});
ev.preventDefault();
});
});