jQuery Ajax - 提交后如何刷新 <DIV>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/868890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ajax - How refresh <DIV> after submit
提问by user107712
How can I refresh just part of the page ("DIV") after my application releases a submit? I'm use JQuery with plugin ajaxForm. I set my target with "divResult", but the page repeat your content inside the "divResult". Sources:
在我的应用程序发布提交后，如何仅刷新页面的一部分（“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>
Page
页
<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>
Thanks.
谢谢。
回答by Matt Smith
To solve this using jquery I would try this;
为了使用 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;
});
});
alternatively, you could get the server to return just the html that needs to be inserted into the div rather than the rest of the html document.
或者，您可以让服务器只返回需要插入到 div 中的 html 而不是 html 文档的其余部分。
I don't really know the TableSorter plugin but I do know that you will need to reinitialize your TableSorter plugin each time you reload the element. so add a line to your success function that targets your table such as
我不太了解 TableSorter 插件，但我知道每次重新加载元素时都需要重新初始化 TableSorter 插件。因此，在针对您的表格的成功函数中添加一行，例如
success: function(html) {
var resultDiv = $("#divResult").replaceWith($('#divResult', $(html)));
$('table.tablesorter', resultDiv).TableSorter();
}
回答by mishac
Your problem is on the server side: you have to make a page that returns only the div you want, and then change the 'url' to match that.
您的问题出在服务器端：您必须制作一个只返回您想要的 div 的页面，然后更改“url”以匹配它。
Currently you're loading the full page with the AJAX call, which is why it's returning the whole page.
当前，您正在使用 AJAX 调用加载整个页面，这就是它返回整个页面的原因。
回答by rz.
回答by Shane
If you just want to refresh your divwith the same static content that was in it before it was overridden by your post results, you can maybe try something like:
如果您只想div使用与您的帖子结果覆盖之前相同的静态内容来刷新您的内容，您可以尝试以下操作：
$("#Container").html($("#Container").html());
of course be careful that the inner HTML has not changed, or alternatively, you can store the innerHTML in a variable in the document.ready()function, then load it whenever you need to. Sorry, written in haste.
当然要注意内部 HTML 没有改变，或者，您可以将 innerHTML 存储在document.ready()函数中的变量中，然后在需要时加载它。不好意思，仓促写。
回答by Ryan
Using jQuery, sometimes when I perform a .get ajax call to update a database, I reload/refresh another part of the page using a simple jQuery .loadstatement in the success callback function to replace the contents of a div.
使用 jQuery，有时当我执行 .get ajax 调用来更新数据库时，我在成功回调函数中使用简单的 jQuery .load语句重新加载/刷新页面的另一部分以替换 div 的内容。
$("#div_to_refresh").load("url_of_current_page.html #div_to_refresh")
I'd like to note that this is not the most efficient way to reload a small portion of data, and thus I would only use it on a low traffic web app, but it is simple to code.
我想指出，这不是重新加载一小部分数据的最有效方法，因此我只会在低流量网络应用程序上使用它，但它很容易编码。
