jquery – Ajax – 提交后如何刷新

前端之家收集整理的这篇文章主要介绍了jquery – Ajax – 提交后如何刷新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在我的应用程序发布提交后,如何刷新页面的一部分(“DIV”)?
我在插件ajaxForm中使用 JQuery.
我用“divResult”设置我的目标,但页面在“divResult”中重复你的内容.
资料来源:
  1. <script>
  2. $(document).ready(function() {
  3. $("#formSearch").submit(function() {
  4. var options = {
  5. target:"#divResult",url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action"
  6. }
  7. $(this).ajaxSubmit(options);
  8. return false;
  9. });
  10. })
  11. </script>

  1. <s:form id="formSearch" theme="simple" class="formulario" method="POST">
  2. ...
  3.  
  4. <input id="btTest" type="submit" value="test" >
  5.  
  6. ...
  7.  
  8. <div id="divResult" class="quadro_conteudo" >
  9. <table id="tableResult" class="tablesorter">
  10. <thead>
  11. <tr>
  12. <th style="text-align:center;">
  13. <input id="checkTodos" type="checkBox" title="Marca/Desmarcar todos" />
  14. </th>
  15. <th scope="col">Name</th>
  16. <th scope="col">Phone</th>
  17. </tr>
  18. </thead>
  19.  
  20. <tbody>
  21. <s:iterator value="entityList">
  22. <s:url id="urlEditar" action="editar"><s:param name="id" value="%{id}"/></s:url>
  23. <tr>
  24. <td style="text-align:center;"><s:checkBox id="checkSelecionado" name="selecionados" theme="simple" fieldValue="%{id}"></s:checkBox></td>
  25. <td> <s:a href="%{urlEditar}"><s:property value="name"/></s:a></td>
  26. <td> <s:a href="%{urlEditar}"><s:property value="phone"/></s:a></td>
  27. </tr>
  28. </s:iterator>
  29. </tbody>
  30. </table>
  31.  
  32. <div id="pager" class="pager">
  33. <form>
  34. <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/first.png" class="first"/>
  35. <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/prev.png" class="prev"/>
  36. <input type="text" class="pagedisplay"/>
  37. <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/next.png" class="next"/>
  38. <img src="<%=request.getContextPath()%>/plugins/jquery/tablesorter/addons/pager/icons/last.png" class="last"/>
  39. <select class="pagesize">
  40. <option selected="selected" value="10">10</option>
  41. <option value="20">20</option>
  42. <option value="30">30</option>
  43. <option value="40">40</option>
  44. <option value="<s:property value="totalRegistros"/>">todos</option>
  45. </select>
  46. <s:label>Total de registros: <s:property value="totalRegistros"/></s:label>
  47. </form>
  48. </div>
  49. <br/>
  50. </div>

谢谢.

解决方法

要使用jquery解决这个问题,我会试试这个;
  1. $(document).ready(function() {
  2. $("#formSearch").submit(function() {
  3. var options = {
  4. /* target:"#divResult",*/
  5.  
  6. success: function(html) {
  7. $("#divResult").replaceWith($('#divResult',$(html)));
  8. },url: "http://localhost:8081/sniper/estabelecimento/pesquisar.action"
  9. }
  10.  
  11. $(this).ajaxSubmit(options);
  12. return false;
  13. });
  14. });

或者,您可以让服务器只返回需要插入div的html而不是html文档的其余部分.

我真的不知道TableSorter插件,但我知道每次重新加载元素时都需要重新初始化TableSorter插件.所以在你的成功函数添加一行,例如

  1. success: function(html) {
  2. var resultDiv = $("#divResult").replaceWith($('#divResult',$(html)));
  3.  
  4. $('table.tablesorter',resultDiv).TableSorter();
  5. }

猜你在找的jQuery相关文章