点击提交按钮不刷新页面

最新推荐文章于 2023-07-27 09:57:42 发布

肖扬、

最新推荐文章于 2023-07-27 09:57:42 发布

阅读量1.1w

点赞数 3

文章标签：异步

本文链接：https://blog.csdn.net/mxiaxxy/article/details/76473519

版权

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

简单代码如下：

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