jQuery ajax方法加载页面局部内容

时间：2013-10-08 编辑：简简单单来源：一聚教程网

使用jQuery的ajax方法很容易的能够帮助我们完成ajax操作，但是这个方法返回的数据是整个页面的HTML，如果加整个页面的HTML全加append到页面上的话这是非常的不友好的，用下面的办法会很好的解决这个问题。

代码如下	复制代码
$.ajax({ url: "hotelQuery!queryHotelByCity.action", type: "post", dataType: "html", data: "queryHotel.city="+cityobj.value+"&queryHotel.wbcid="+wbcid, success: function(data){ $("#hotellists").html($(data).filter("#list").html()); } });

代码解析：

从上面的代码我们可以看出，返回的数据是data,但是我们如果在要ajax请求的页面的那部分用id为list的一个DIV包围起来，这样我们通过$(data).filter("#list").html()就可以拿到DIV中的HTML内容，这样也就达到我们的要求了。

个人还有一个更简单的办法，就是使用load()来操作

Load完整格式是：load( Url, [Data], [Callback] )

Url：网页路径（这边小弟侧试时，只能在同一目录可以使用，其他外部网页会无法Work)

Data ：参数

Callback：函数

Url路径

代码如下	复制代码
$('#div1').load("Load.aspx"); // 在dvi1?面就会显示Load.htm的内容

Data参数

代码如下

复制代码

$('#div1').load("Load.aspx",{"id":"1"}); // 等於Load.aspx?id=1

$('#div1').load("Load.aspx",{"id":"1","page":"1"}); // 等於Load.aspx?id=1&page=1

CallBack函数

指的是载入完成的动作(CallBack)

代码如下	复制代码
$('#div1).load("Load.aspx", { "id": "1", "page": "1" }, function() { alert("载入完成"); });

Selector选择器

代码如下	复制代码
$('#div1').load("Load.aspx #img1");

//指的是只载入Load.aspx内id??mg1的物件。