HTML部分
<form method="post" action="">
<div class="form-group">
<label>你的称呼:<span id="errorInfo1" class="errorInfo"></span></label>
<input type="text" class="form-control" id="name"/>
</div>
<div class="form-group">
<label>个人网站:</label>
<input type="url" class="form-control" id="url"/>
</div>
<div class="form-group">
<label>评论内容:<span id="errorInfo2" class="errorInfo"></span></label>
<textarea class="form-control" id="content"></textarea>
</div>
<input id="submit" type="submit" class="btn btn-primary" value="commit"></input>
<label><span id="errorInfo3" class="errorInfo"></span></label>
</form>
JS部分
var button = $("#submit");
button.submit(function(){
jQuery('form').serialize();
$.ajax({
type:"post",
url:"action.php",
data:{
name:$("#name").val(),
urlAdd:$("#url").val(),
content:$("#content").val()
},
dataType:'json',
success:function(data){
$(".errorInfo").html("");
$("#errorInfo"+data.code).html(data.msg);
},
error:function(jqXHR){
alert(jqXHR.status);
}
})
});
我点击按钮提交,页面好像会自动刷新,JS的ajax根本执行不到...,是因为我在html里写了一个form action=""的原因吗
最简单的 把input的type改成button
如果你要用ajax提交的话,那么将form表单去掉,或者就用form表单直接提交就是了何必再加上个ajax呢
<form method="post" action="action.php">
<div class="form-group">
<label>你的称呼:<span id="errorInfo1" class="errorInfo"></span></label>
<input type="text" class="form-control" id="name"/>
</div>
<div class="form-group">
<label>个人网站:</label>
<input type="url" class="form-control" id="url"/>
</div>
<div class="form-group">
<label>评论内容:<span id="errorInfo2" class="errorInfo"></span></label>
<textarea class="form-control" id="content"></textarea>
</div>
<input type="submit" class="btn btn-primary" value="commit"></input>
<label><span id="errorInfo3" class="errorInfo"></span></label>
</form>
对的,因为form
的关系。
去掉
form
使用普通的button
点击事件提交数据使用
form
的submit
事件
$( "form" ).submit(function( event ) {
event.preventDefault(); // 阻止默认事件
});
preventDefault() 方法
其实既然你要用ajax,不如把form改成div
你可以阻止表单的提交return false;