jQuery ajax方法載入頁面局部內容

使用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的物件。