我有一个场景,在我的JSP中,在div标记下,scriptlet中有一些内容,每当我从服务器收到请求时,它就会从数据库中读取数据。以前每次更新时,我都会刷新整个页面,这也会加载资源,并且会增加页面大小,所以我想为什么不只更新div标签-
我的div标签示例类似于-
<div id="container">
<%
StudentLogin name = (StudentLogin)request.getAttribute("name");
List<Cube> personList = (List)request.getAttribute("message");
for(Cube cube: personList){
String usedBy = cube.getUsedby().trim();
boolean alreadyUsed = (usedBy.length()>0);
String ipAddress = cube.getIp();
String cubeName = cube.getCubename();
String details = cube.getDetails();
String since = "Not Busy ";
String cubeCirle = "pricemid";
%>
<div class="<%= mainClass%> ">
<h1> <%= ipAddress%> </h1>
<div class="<%= cubeCirle%>">
<h2> <%= cubeName%> </h2>
</div>
<div class="infos">
<h3> <%= details%> </h3>
<h2> <%= usedBody%> </h2>
<h3> <%= since%> </h3>
</div>
<div class="<%= priceFooterClass%> ">
<div class="<%= buttonclass%> ">
<a href="#" onClick="suc('<%=userName%>','<%=Password%>','<%=usedBody%>','<%=cubeName%>')"> <%= buttonName%> </a>
</div>
</div>
</div>
<% } %>
</div>
因此,对于每个ajax调用,我都期望名称和消息的新值,并在此基础上更新我的div标记。
以下是我的ajax调用示例-
$.ajax({
url: '${pageContext.request.contextPath}/usercontroller/success.json',
data: JSON.stringify(datamodel),
type: "POST",
beforeSend: function(xhr) {
xhr.setRequestHeader("Accept", "application/json");
xhr.setRequestHeader("Content-Type", "application/json");
},
success: function(resp) {
$("#container").html(resp);
},
error: function(e){
alert('Error121212: ' + e);
}
});
通过ajax调用,我意识到它只是替换了div标记中的全部内容,而不是更新或简单地调用它。它也尝试使用load方法,但这更新了整个页面,所以我应该做些什么来用update值刷新特定div标记内的内容,仅此而已。
目标-
我每次都会从带有名称和消息的服务器中获得不同的值,基于此,div标记下的内容必须更改,所以我应该替换整个div命令并创建一个内部html来替换div标记来执行此操作吗
您必须记住,JSP完全在服务器上处理,发送到浏览器的结果是纯HTML。您不能只将浏览器端的JSON对象传递给div并期望JSP呈现发生。
一个快速而肮脏的解决方案是在成功回调中手动重建标记$("#container").html("<h1>" + resp.name + "</h1>");
等
一个更复杂的解决方案是从服务器检索您尝试更新的部分的整个标记,而不仅仅是JSON形式的数据。或者您可以包含一个客户端模板化解决方案。