前言
今天同事碰到一个问题，他在button上添加了点击事件，想要通过ajax请求后台，通过成功回调函数跳转成功页面。问题是后端可以收到请求，业务处理也正常，但是就是进不去成功回调函数。可能有人已经知道为什么了?但是并不是你想的那样!
一、代码是这样的
<form action="">
<div>
<span>姓名</span>
<input type="text" placeholder="输入姓名" name="appName" id="appName" maxlength="4">
</div>
<div>
<span>身份证号码 </span>
<input type="text" placeholder="输入身份证号码" name="appIdNo" id="appIdNo" >
</div>
<div>
<span>手机号</span>
<input type="text" placeholder="输入手机号" name="appMobile" id="appMobile">
</div>
<button onclick="clickJustInsured();"></button>
</form>
//ajax是这样的。请求参数什么的都没有问题
$.ajax({
type : "post",
async : true,
data:"",//参数没问题, 我这里就写""了
url : "${contextPath}/cxwy/underwriting",
success : function(data){
var resultCode = data.resultCode;
if( resultCode == 'success' ){
window.location.href="${contextPath}/View/page/cxwy/succress.jsp?sr="+adviceCode;
layer.closeAll();
}else if(resultCode == "fail"){
layer.closeAll();
var msg = data.resultMsg;
layer.open({content:msg, btn: "确定"});
return;
}
}
});
二、问题分析
思路一:
根据以往的经验，第一时间，我觉得问题出在后端返回的数据类型上。假如后端返回的不是json数据类型，前端页面通过data.resultCode取值肯定会有问题。
我的解决是ajax添加接收的数据类型dataType : 'json'，后端添加注解@ResponseBody把后端返回数据类型转为json，大功告成！前后端保持数据类型一致，并且都是json数据，心里想着肯定没问题了。
然后刷新前端缓存，前端打断点，开始测试，结果还是一样的问题，成功还是没有进来，并且当前页面地址后面还添加上了参数。有点神奇哈。
思路二:
"事出反常必有妖"，通过查询资料发现，onclick事件执行完毕以后，会执行浏览器的默认事件，button按钮的默认类型是type="submit" ，也就是会说，ajax执行的时候，还有一个form表单提交事件。
由于form表单的action属性为空，那么这个请求将由当前页面的路径来处理。而form表单默认是get请求，所有就出现上图中的地址。
找到原因了,解决方法就非常多了~
方法一:
onclick事件中添加return false，取消浏览器默认事件。
<button onclick="clickJustInsured();return false;"></button>
方法二:
给button 添加type="button"，这样就不会有表单提交事件了。
<button type="button" onclick="clickJustInsured();"></button>
方法三:
不用button标签了, 换用span、div等。但是会影响到页面的样式，还需要再修改页面的样式，不推荐这种！！！
方法非常多，不一一列举了，比如就用不用form标签了.....
喜欢的话，可以关注公众号“莫非技术栈”，免费领取学习资源~