阿贾克斯-怎么刷新 <DIV> 提交后

StackOverflow https://stackoverflow.com/questions/868890

  •  22-08-2019
  •  | 
  •  

题

怎么可能我只是刷新网页的一部分("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>

谢谢。

有帮助吗？

解决方案

要解决这个使用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();
}

其他提示

您的问题是在服务器端：你必须只返回你想要的DIV一个页面，然后更改“网址”，以匹配

。

目前你正在加载整个页面与AJAX调用，这就是为什么它返回整个页面。

可以使用大多数与ajaxSubmit会正常的jquery AJAX功能参数。只是通过在一个成功的功能。

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

请参阅这里更详尽的例子。

如果你只是想刷新具有相同的静态内容，这是在之前它是由您的文章的结果推翻了你的div，你也许可以尝试这样的：

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

当然要小心的是，内HTML没有改变，或者可替换地，可以存储的innerHTML在document.ready()函数的变量，然后每当需要加载它。对不起，写在急速。

使用jQuery，有时当我执行。获得阿贾克斯呼吁更新一个数据库，我重新装载/刷新，另一部分网页使用一个简单的jQuery .负载 发言的成功回调功能来代替的内容div。 

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

我想请注意，这是不是最有效的方式来重新装载的一小部分的数据，因此，我将只使用一个低的交通网络的应用程序，但它是简单的代码。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top