问题描述:在页面中有一个表单,包含姓名和密码,通过ajax提交的时候,每次需要点击两次提交按钮才能进行页面跳转。
$(function () {
$("#btn").click(function () {
//2.发送ajax请求,提交表单数据
$.post("userServlet/login",$("#loginForm").serialize(),function (data) {
//data : {flag:false,errorMsg:''}
if(data.flag){
//登录成功
location.href="${pageContext.request.contextPath }/product_list.jsp";
}else{
//登录失败
$("#errorMsg").innerHTML(data.errorMsg)
}
});
});
});
<form id="loginForm" action="" method="post" accept-charset="utf-8">
<tr align="center">
<td style="border-color: #5CA5D6;height: 40px"><label style="font-weight:bold;" >用户名:</label></td>
<td><input type="text" name="username" ><br></td>
</tr>
<tr align="center">
<td style="border-color: #5CA5D6"><label style="font-weight:bold;" >密码</label></td>
<td> <input type="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交查询" id="btn"></td>
</tr>
</form>
解决方式:不使用type为submit类型的按钮,而是使用type是button的按钮。
产生问题的原因:发生两次提交的原因是在执行完ajax请求后,并没有阻止submit的行为。