问题描述
在给 bootstrap 页面 form 表单中的 input 搜索框绑定回车事件后，输入完成点击回车搜索，页面会向后台发起两次请求，且会自动取消第一次请求，自动刷新页面导致不是你输入搜索条件查询到的结果，效果图如下
图中通过 network 可以看到发起了两次请求 list，那么这是什么原因呢？原始代码如下
<form id="user-form"> <input type="hidden" id="title" name="title" value="/"> <input type="hidden" id="platform" name="platform" th:value="${platform}"> <input type="hidden" id="filterFlag" name="filterFlag"> <div class="select-list"> <ul> <li> 名称：<input type="text" name="fileName" id="fileName"/> </li> <li> <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()" id="search"><i class="fa fa-search"></i> 搜索</a> <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a> </li> <li style="float: right"> <button style="width: 40px;" class="btn btn-default btn-outline" type="button" onclick="$.table.search()" name="refresh" aria-label="刷新" title="刷新"><i class="glyphicon glyphicon-refresh icon-refresh"></i> </button> <button style="width: 40px;" class="btn btn-default btn-outline" type="button" onclick="toggleCustomView()" name="customView" aria-label="Toggle custom view" title="Toggle custom view"><i class="glyphicon glyphicon glyphicon-eye-open"></i> </button> </li> </ul> </div></form>
复制代码
对应绑定的 js 事件的方法源码如下
//回车事件$("#fileName").bind("keydown",function(e){ // 兼容FF和IE和Opera var theEvent = e || window.event; var code = theEvent.keyCode || theEvent.which || theEvent.charCode; //console.log(code); if (code == 13) { //回车执行查询 $("#search").trigger("click"); }});
复制代码
此时，在页面 input 框输入值作为参数值之后，点击回车触发搜索事件，发送 form 表单参数请求后台获取数据，会出现如图一的情况，发送两次请求，并且自动取消第一次请求，而实际上在第一次请求之后，输入框的参数已经被清空，此时的第二次请求便失去了参数导致获取的数据不是我们想要的结果，那么如何解决呢？
处理方案
处理方案是在 input 搜索框回车事件业务逻辑中，主动触发搜索事件之后返回 false，让 form 表单不再进行列表刷新，js 代码更改之后如下
//回车事件$("#fileName").bind("keydown",function(e){ // 兼容FF和IE和Opera var theEvent = e || window.event; var code = theEvent.keyCode || theEvent.which || theEvent.charCode; //console.log(code); if (code == 13) { //回车执行查询 $("#search").trigger("click"); return false; }});
复制代码
回车执行查询之后的 return false;不能缺少，缺少就会出现上述问题，加上之后效果正常，如下图
这样问题就解决了，虽然是个小问题，但是查究问题原因确实废了一点功夫，这里记录下来，希望对大家有帮助。
评论