jQuery中ajax基礎教程(1/4)

load()方法

load( url [ , data ][ , callback])  載入遠程 HTML 檔案代碼並插入至 DOM 中。

參數名稱 類型 說明

url string 請求HTML頁面的URL地址

data object 發送至伺服器的key/value資料

callback     function 請求完成後的回調資料，無論請求成功或失敗

這個方法預設使用 GET 方式來傳遞的，如果[data]參數有傳遞資料進去，就會自動轉換為POST方式的。jQuery 1.2 中，可以指定選擇符，來篩選載入的 HTML 文檔，DOM 中將僅插入篩選出的 HTML 程式碼。文法形如 "url #some > selector"。

這個方法可以很方便的動態載入一些HTML檔案，例如表單。

範例程式碼：

代碼如下

複製代碼

$(function(){ $("#reText").load("test.html"); }) //////////   2  ///////// $(".ajax.load").load("2008/03/30/1130270.html .classname", function (responseText, textStatus, XMLHttpRequest){ this;//在這裡this指向的是當前的DOM對象，即$(".ajax.load")[0] //篩選載入需要的內容。在url後面空格加選取器如：load("test.html #idname") //alert(responseText);//請求返回的內容 //alert(textStatus);//請求狀態：success，error //alert(XMLHttpRequest);//XMLHttpRequest對象 });

註：不知道為什麼URL寫絕對路徑在FF下會出錯，知道的麻煩告訴下。下面的get()和post()樣本使用的是絕對路徑，所以在FF下你將會出錯並不會看到返回結果。還有get()和post()樣本都是跨域調用的，發現傳上來後沒辦法擷取結果，所以把運行按鈕去掉了。

$.get( url [ , data] [ , callback ] [ , type] )   使用GET方式來進行非同步請求

參數名稱 類型 說明

url string 發送請求的URL地址

data object 發送至伺服器的key/value資料會作為QueryString附加到請求 URL中

callback     function 載入成功（當response的返回狀態為success）時回呼函數自動 將請求結果和狀態傳遞給該方法

type  string 伺服器返回的內容的格式，包括xml、html、script、json、text 和_default

代碼如下	複製代碼
$.get("./Ajax.php", {Action:"get",Name:"lulu"}, function (data, textStatus){ //返回的 data 可以是 xmlDoc, jsonObj, html, text, 等等 alert(data); //alert(textStatus);//請求狀態：success，error等等。 當然這裡捕捉不到error，因為error的時候根本不會運行該回呼函數 //alert(this); });

Xml檔案php檔案

代碼如下	複製代碼
<?php header("Content-Type:text/xml; charset=utf-8"); echo "<?xml version='1.0' encoding='utf-8'?>". "<comments>". "<comment username='{$_REQUEST['username'] }' >". "<content>{$_REQUEST['content']}</content>". "</comment>". "</comments>"; ?>

Html檔案（回呼函數部分）

代碼如下	複製代碼
function (data, textStatus){ var username = $(data).find("comment").attr("username"); var content = $(data).find("comment content").text(); var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";        $("#resText").html(txtHtml); // 把返回的資料添加到頁面上 });

首頁 1 2 3 4 末頁