序言
本日同事碰到一个问题,他在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标签了.....
喜好的话,可以关注"大众号“莫非技能栈”,免费领取学习资源~