點擊提交按鈕不刷新頁面

原因 :點擊提交按鈕提交搜索條件進行異步請求,結果頁面總是會進行刷新,導致異步返回的數據無法在頁面上渲染。

簡單代碼如下:

<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
}

通過以上的兩個節點能夠達到簡單的提交不刷新效果

寫的有點亂 不足之處還請指正諒解
後續會有補充————————————-

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章