点击提交按钮不刷新页面

时间：2025-03-31 08:00:47
原因 :点击提交按钮提交搜索条件进行异步请求，结果页面总是会进行刷新，导致异步返回的数据无法在页面上渲染。

简单代码如下：

<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
}
通过以上的两个节点能够达到简单的提交不刷新效果

写的有点乱 不足之处还请指正谅解
后续会有补充————————————-

相关文章