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

Posted 2023-02-22

【中文标题】Ajax - 提交后如何刷新 <DIV>

【英文标题】：Ajax - How refresh <DIV> after submit

【发布时间】：2010-10-26 12:22:27

【问题描述】：

我的应用程序发布提交后，如何仅刷新页面的一部分（“DIV”）？ 我将 JQuery 与插件 ajaxForm 一起使用。 我用“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> 

谢谢。

【参考方案1】：

要使用 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();

【参考方案2】：

您的问题出在服务器端：您必须创建一个仅返回所需 div 的页面，然后更改“url”以匹配它。

目前您正在使用 AJAX 调用加载整个页面，这就是它返回整个页面的原因。

【参考方案3】：

您可以将大多数普通的 jquery ajax 函数参数与 ajaxSubmit 一起使用。只需传入一个成功函数即可。

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

有关更详细的示例，请参阅 here。

【讨论】：

这种情况下如何使用普通的JQuery？

【参考方案4】：

如果您只想使用与您的帖子结果覆盖之前相同的静态内容刷新您的div，您可以尝试以下操作：

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

当然要注意内部 HTML 没有更改，或者，您可以将内部 HTML 存储在 document.ready() 函数的变量中，然后在需要时加载它。不好意思，写的太仓促了。

【参考方案5】：

使用 jQuery，有时当我执行 .get ajax 调用来更新数据库时，我会在成功回调函数中使用简单的 jQuery .load 语句重新加载/刷新页面的另一部分以替换 div 的内容。

$("#div_to_refresh").load("url_of_current_page.html #div_to_refresh")

我想指出，这不是重新加载一小部分数据的最有效方式，因此我只会在低流量网络应用程序上使用它，但它很容易编码。