点击提交按钮不刷新页面

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

简单代码如下:

<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代码

                        
                        

//js代码

function initsearch(){
        $.post("写入需要跳转的url",$('#search').serialize(),function(data){
            //data中是服务端返回的数据
            //这里进行成功后的渲染。。。。。。
        });
return false;//在这里返回false
}

通过以上的两个节点能够达到简单的提交不刷新效果

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

你可能感兴趣的:(点击提交按钮不刷新页面)