原因 :點擊提交按鈕提交搜索條件進行異步請求,結果頁面總是會進行刷新,導致異步返回的數據無法在頁面上渲染。
簡單代碼如下:
<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
}
通過以上的兩個節點能夠達到簡單的提交不刷新效果
寫的有點亂 不足之處還請指正諒解
後續會有補充————————————-