logo标签列表

Ajax - 如何在提交后刷新<DIV>？

jqueryajaxrefreshsubmit
7
我该如何在应用程序提交后刷新页面的部分内容（“DIV”）？我使用带有ajaxForm插件的JQuery。我将目标设置为“divResult”，但页面会在“divResult”中重复显示内容。
源代码：
   <script>      
       $(document).ready(function() {      
           $("#formSearch").submit(function() {      
                var options = {    
                  target:"#divResult",
                  url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action"  
                }      
               $(this).ajaxSubmit(options);      
               return false;      
          });      
      })
   </script>

页面

 <s:form id="formSearch" theme="simple" class="formulario" method="POST">      
 ...      

 <input id="btTest" type="submit" value="test" >      

 ...      

                 <div id="divResult" class="quadro_conteudo" >      
                     <table id="tableResult" class="tablesorter">      
                         <thead>      
                             <tr>      
                                 <th style="text-align:center;">      
                                     <input id="checkTodos" type="checkbox" title="Marca/Desmarcar todos" />      
                                 </th>      
                                 <th scope="col">Name</th>      
                                 <th scope="col">Phone</th>      
                             </tr>      
                         </thead>      

                         <tbody>      
                             <s:iterator value="entityList">      
                                 <s:url id="urlEditar" action="editar"><s:param name="id" value="%{id}"/></s:url>      
                                <tr>      
                                    <td style="text-align:center;"><s:checkbox id="checkSelecionado" name="selecionados" theme="simple" fieldValue="%{id}"></s:checkbox></td>      
                                    <td> <s:a href="%{urlEditar}"><s:property value="name"/></s:a></td>      
                                    <td> <s:a href="%{urlEditar}"><s:property value="phone"/></s:a></td>      
                                </tr>      
                             </s:iterator>      
                         </tbody>      
                     </table>      

                     <div id="pager" class="pager">      
                         <form>      
                             <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/first.png" class="first"/>      
                             <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/prev.png" class="prev"/>      
                             <input type="text" class="pagedisplay"/>      
                             <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/next.png" class="next"/>      
                             <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/last.png" class="last"/>      
                             <select class="pagesize">      
                                 <option selected="selected" value="10">10</option>      
                                 <option value="20">20</option>      
                                 <option value="30">30</option>      
                                 <option value="40">40</option>      
                                 <option value="<s:property value="totalRegistros"/>">todos</option>      
                             </select>      
                             <s:label>Total de registros: <s:property value="totalRegistros"/></s:label>      
                         </form>      
                     </div>      
                     <br/>      
             </div>

感谢您的选择。
5个回答
8
我会尝试使用jQuery解决这个问题，方法如下：；
$(document).ready(function() {
    $("#formSearch").submit(function() {
        var options = {
            /* target:"#divResult", */

            success: function(html) {
                $("#divResult").replaceWith($('#divResult', $(html)));
            },

            url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action"
        }

        $(this).ajaxSubmit(options);
        return false;
    });
});

或者，您可以让服务器仅返回需要插入到div中的html，而不是整个html文档。

我不太了解TableSorter插件，但我知道每次重新加载元素时都需要重新初始化TableSorter插件。因此，请在您的成功函数中添加一行以定位您的表格，例如

success: function(html) {
    var resultDiv = $("#divResult").replaceWith($('#divResult',     $(html)));

    $('table.tablesorter', resultDiv).TableSorter();
}
3
你的问题在服务器端：你需要创建一个只返回你想要的div的页面，然后修改'url'以匹配它。
目前你正在使用AJAX调用加载整个页面，这就是为什么它返回整个页面。
0

如果您只想使用与覆盖之前相同的静态内容刷新您的 div，您可以尝试类似以下的方法：

$("#Container").html($("#Container").html());

当然要小心内部HTML没有改变，或者你可以在document.ready()函数中将innerHTML存储在一个变量中，然后在需要时加载它。抱歉，匆忙写成。

0

您可以在ajaxSubmit中使用大多数常规的jquery ajax函数参数。只需传递一个成功函数即可。

$('#formSearch').ajaxSubmit({success: function(){ /* refresh div */ });

请参见此处以获取更详细的示例。

在这种情况下如何使用普通的JQuery？ - user107712
0
使用jQuery时，有时候我会执行一个.get ajax调用来更新数据库，然后在成功的回调函数中使用简单的jQuery .load语句重新加载/刷新页面的另一部分，以替换div的内容。
$("#div_to_refresh").load("url_of_current_page.html #div_to_refresh")

我想指出，这并不是重新加载小部分数据的最有效方式，因此我只会在低流量的Web应用程序上使用它，但编码简单。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接