原因 :点击提交按钮提交搜索条件进行异步请求,结果页面总是会进行刷新,导致异步返回的数据无法在页面上渲染。
简单代码如下:
<body>
<form id="formID">
<table width="100%">
<tr>
<td>
<table >
<tr>
<td>查询条件:</td>
<td>
<input id="queryData" name="name" type="text" placeholder="请输入查询数据">
</td>
</tr>
</table>
</td>
<button id="search" onclick="initSearch()" ></i>查询</button>
<button type="reset" id="resetBtn">重置</button>
</td>
<td ></td>
</tr>
</table>
</form>
</body>
通过上面的html 当点击查询按钮时 会请求initSearch() 方法 在js中进行异步请求 ,但是会刷新网页
js代码如下
<script>
function initsearch(){
$.post("写入需要跳转的url",$('#formID').serialize(),function(data){
//data中是服务端返回的数据
//这里进行成功后的渲染。。。。。。
});
}
</script>
为了达到页面不刷新的效果,可以在查询的button节点下的onclick属性里 加 return, 并且调用方法完成后返回false;
代码如下:
//html代码
<button id="search" onclick="return initSearch()" ></i>查询</button>
<button type="reset" id="resetBtn">重置</button>
//js代码
function initsearch(){
$.post("写入需要跳转的url",$('#search').serialize(),function(data){
//data中是服务端返回的数据
//这里进行成功后的渲染。。。。。。
});
return false;//在这里返回false
}
通过以上的两个节点能够达到简单的提交不刷新效果
写的有点乱 不足之处还请指正谅解
后续会有补充————————————-