比如search功能,输入关键字,在数据库中查找对应的包含关键字的记录并显示在页面上,在一段Ajax请求之后,返回html text。。。
?
需要在返回的html中找到指定id的内容用来更新页面中的对应的html内容。。。
?
比如页面:
?
?? <div id="test">
??? <c:forEach var="solution" items="${mySolutions}">
??? ??? <div class="solution">
??? ??????? <div class="span-1"><img src="${pageContext.request.contextPath}/resources/images/SolutionItem.png"></img></div>
??? ??????? <div class="span-18">
??? ??????????? <div class="solutionName"><a href="view/${solution.id}">${solution.name}</a></div>
??? ??????????? <div class="solutionDescription">${solution.shortDescription}</div>
??? ??????? </div>
??? ??????? <div class="span-2" id="tag_${solution.id}">
??? ??????? ??? <div>
??? ??? ??????? ??? <a href="#" onclick="addTag('${solution.id}')">add</a>
??? ??? ??????? ??? more
??? ??????? ??? </div>
??? ??????? ??? <div><textarea style="width:75; height:25; overflow: auto;" rows="3" cols="5">111111111</textarea></div>
??? ??????? ??? <div><textarea style="width:75; height:25; overflow: auto;" rows="3" cols="5">222222222</textarea></div>
??? ??????? ??? <div><textarea style="width:75; height:25; overflow: auto;" rows="3" cols="5">333333333</textarea></div>
??? ??????? </div>
??? ??????? <div class="span-3 last"><img src="${pageContext.request.contextPath}/resources/images/sample-solution.jpg" class="solutionIcon" alt="Solution Icon"></img></div>
???
??? ??????? <div class="span-24 last solutionSplitter">
??? ??????????? <hr/>
??? ??????? </div>
??? ??? </div>
??? </c:forEach>
</div>
?
?
这个时候采用ajax局部更新:
如下:
?
$.ajax({
type : "POST",
url : 'test.jsp',
dataType : "html",
success: function(data) {
alert( data ); // shows whole dom
//alert( $(data).find('#test').html() ); // returns null
$("#test").html($(data).find("#test").html());
?},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});
http://api.jquery.com/jQuery.ajax/#options