前言
今天同事碰到一个问题,他在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标签了…..
本文内容来自网友供稿,文章观点仅代表作者本人,本站非盈利且无偿提供信息存储空间服务,不拥有所有权,如有文章有不实信息或侵犯了您的权益,请发送邮件至 cfseo1997@163.com 反馈核实,如需转载请注明出处:https://www.taobobolive.com/143426.html