jQuery 選取器 （基礎惡補之三)+Ajax

標籤：href   參數   ror   tags   狀態   例子   school   from   var   

jQuery load() 方法

jQuery load() 方法是簡單但強大的 AJAX 方法。

load() 方法從伺服器載入資料，並把返回的資料放入被選元素中。

文法：

$(selector).load(URL,data,callback);

必需的 URL 參數規定您希望載入的 URL。

可選的 data 參數規定與請求一同發送的查詢字串鍵/值對集合。

可選的 callback 參數是 load() 方法完成後所執行的函數名稱。

這是樣本檔案（"demo_test.txt"）的內容：

<h2>jQuery and AJAX is FUN!!!</h2><p id="p1">This is some text in a paragraph.</p>

下面的例子會把檔案 "demo_test.txt" 的內容載入到指定的 <div> 元素中：

樣本

$("#div1").load("demo_test.txt");

也可以把 jQuery 選取器添加到 URL 參數。

下面的例子把 "demo_test.txt" 檔案中 id="p1" 的元素的內容，載入到指定的 <div> 元素中：

執行個體

$("#div1").load("demo_test.txt #p1");

可選的 callback 參數規定當 load() 方法完成後所要允許的回呼函數。回呼函數可以設定不同的參數：

• responseTxt - 包含調用成功時的結果內容
• statusTXT - 包含調用的狀態
• xhr - 包含 XMLHttpRequest 對象

下面的例子會在 load() 方法完成後顯示一個提示框。如果 load() 方法已成功，則顯示“外部內容載入成功！”，而如果失敗，則顯示錯誤訊息：

執行個體

$("button").click(function(){  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){    if(statusTxt=="success")      alert("外部內容載入成功！");    if(statusTxt=="error")      alert("Error: "+xhr.status+": "+xhr.statusText);  });});

HTTP 要求：GET vs. POST

兩種在用戶端和伺服器端進行要求-回應的常用方法是：GET 和 POST。

• GET - 從指定的資源請求資料
• POST - 向指定的資源提交要處理的資料

GET 基本上用於從伺服器獲得（取回）資料。注釋：GET 方法可能返回快取資料。

POST 也可用於從伺服器擷取資料。不過，POST 方法不會快取資料，並且常用於連同請求一起發送資料。

如需學習更多有關 GET 和 POST 以及兩方法差異的知識，請閱讀我們的 HTTP 方法 - GET 對比 POST。

jQuery $.get() 方法

$.get() 方法通過 HTTP GET 請求從伺服器上請求資料。

文法：

$.get(URL,callback);

必需的 URL 參數規定您希望請求的 URL。

可選的 callback 參數是請求成功後所執行的函數名。

下面的例子使用 $.get() 方法從伺服器上的一個檔案中取回資料：

執行個體

$("button").click(function(){  $.get("demo_test.asp",function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});

$.get() 的第一個參數是我們希望請求的 URL（"demo_test.asp"）。

第二個參數是回呼函數。第一個回調參數存有被請求頁面的內容，第二個回調參數存有請求的狀態。

提示：這個 ASP 檔案 ("demo_test.asp") 類似這樣：

<%response.write("This is some text from an external ASP file.")%>

jQuery $.post() 方法

$.post() 方法通過 HTTP POST 請求從伺服器上請求資料。

文法：

$.post(URL,data,callback);

必需的 URL 參數規定您希望請求的 URL。

可選的 data 參數規定連同請求發送的資料。

可選的 callback 參數是請求成功後所執行的函數名。

下面的例子使用 $.post() 連同請求一起發送資料：

執行個體

$("button").click(function(){  $.post("demo_test_post.asp",  {    name:"Donald Duck",    city:"Duckburg"  },  function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});

親自試一試

$.post() 的第一個參數是我們希望請求的 URL ("demo_test_post.asp")。

然後我們連同請求（name 和 city）一起發送資料。

"demo_test_post.asp" 中的 ASP 指令碼讀取這些參數，對它們進行處理，然後返回結果。

第三個參數是回呼函數。第一個回調參數存有被請求頁面的內容，而第二個參數存有請求的狀態。

提示：這個 ASP 檔案 ("demo_test_post.asp") 類似這樣：

<%dim fname,cityfname=Request.Form("name")city=Request.Form("city")Response.Write("Dear " & fname & ". ")Response.Write("Hope you live well in " & city & ".")%>

Ajax參考手冊

jQuery noConflict() 方法

noConflict() 方法會釋放會 $ 標識符的控制，這樣其他指令碼就可以使用它了。

執行個體

當然，您仍然可以通過全名替代簡寫的方式來使用 jQuery：

$.noConflict();jQuery(document).ready(function(){  jQuery("button").click(function(){    jQuery("p").text("jQuery 仍在運行！");  });});

執行個體

您也可以建立自己的簡寫。noConflict() 可返回對 jQuery 的引用，您可以把它存入變數，以供稍後使用。請看這個例子：

var jq = $.noConflict();jq(document).ready(function(){  jq("button").click(function(){    jq("p").text("jQuery 仍在運行！");  });});

親自試一試

執行個體

如果你的 jQuery 代碼塊使用 $ 簡寫，並且您不願意改變這個捷徑，那麼您可以把 $ 符號作為變數傳遞給 ready 方法。這樣就可以在函數內使用 $ 符號了 - 而在函數外，依舊不得不使用 "jQuery"：

$.noConflict();jQuery(document).ready(function($){  $("button").click(function(){    $("p").text("jQuery 仍在運行！");  });});

jQuery 文法執行個體

$(this).hide()

示範 jQuery 的 hide() 函數，隱藏當前的 HTML 元素。

$("p").hide()

示範 jQuery 的 hide() 函數，隱藏所有 <p> 元素。

$(".test").hide()

示範 jQuery 的 hide() 函數，隱藏所有 class="test" 的元素。

$("#test").hide()

示範 jQuery 的 hide() 函數，隱藏 id="test" 的元素。

jQuery 選取器 （基礎惡補之三)+Ajax