日期:2014-05-17  浏览次数:20664 次

JQuery Ajax获取返回html中指定的内容

比如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