序言

本日同事碰到一个问题,他在button上添加了点击事宜,想要通过ajax要求后台,通过成功回调函数跳转成功页面。
问题是后端可以收到要求,业务处理也正常,但是便是进不去成功回调函数。
可能有人已经知道为什么了?但是并不是你想的那样!

一、代码是这样的

jsp怎么绑定按钮点击事件button标签添加onclick的事宜会碰着什么神奇的工作 Angular

<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标签了.....

喜好的话,可以关注"大众年夜众号“莫非技能栈”,免费领取学习资源~