button标签的用法 讲解html设置button的位置

button标签的用法

跟大家说一说button标签的用法和讲解html设置button的位置的介绍，一起跟随小编看看吧！

前言

今天同事碰到一个问题，他在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，取消浏览器默认事件。