目錄
前言
一.load方法
1.1load()簡介
1.2load()方法示例
1.3load()方法回調函數的參數
二.$.get()方法
2.1$.get()方法介紹
2.2詳細說明
2.3一些例子
2.3.1請求test.php網頁并傳送兩個參數
?2.3.2顯示test返回值
?三.$.post()方法
3.1$.post()方法介紹
3.2詳細說明
3.3一些例子
3.3.1請求test.php頁面，并發送一些參數
前言
之前我們在AJAX(JavaScript版本)-CSDN博客中已經闡述了如何使用“js操作AJAX”，在本篇我們闡述如何使用“JQ操作AJAX”，JQ操作AJAX比JS操作AJAX更加方便
一.load方法
1.1load()簡介
JQuery?load()方法是簡單且強大的AJAX方法
load()方法從服務器加載數據，并把返回的數據放入被選元素中
語法：
$(selector).load(URL,data,callback);
參數說明：
- URL：文件所在的路徑
- data：與請求一同發送的查詢字符串鍵/值對集合
- callback：load()方法完成后執行的函數名稱
1.2load()方法示例
下面是示例文件“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>元素中:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body><div id="demo"></div><script>$("#demo").load("/static/demo_test.txt");</script>
</body>
</html>效果圖：
我們也可以對“demo_test.txt”文件添加CSS選擇器，只選出符合條件的標簽
$("#demo").load("/static/demo_test.txt #p1");效果：
1.3load()方法回調函數的參數
load()方法的callback參數規定load()方法完成后執行的回調函數，回調函數可以有三個參數：
- responsTxt：包含調用成功時的結果內容
- statusTxt：包含調用的狀態
- xhr：包含XMLHttprequest對象
?例如下面這個例子，點擊按鈕后彈窗提示信息：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body><div id="demo"><h2>使用 jQuery AJAX 來改變文本</h2></div><button>獲得外部內容</button><script>$("button").click(function(){$("#demo").load("/static/demo_test.txt",function(responseTxt,statusTxt,xhr){if(statusTxt == "success"){alert("成功");}if(statusTxt == "error"){alert("錯誤");}console.log("responseTxt是:",responseTxt);console.log("statusTxt是:",statusTxt);console.log("xhr是:",xhr);}); });</script>
</body>
</html>效果：
“responseTxt”、“statusTxt”、“xhr”分別為：
二.$.get()方法
2.1$.get()方法介紹
$.get()方法通過遠程HTTP GET請求載入信息
這是一個簡單的GET請求功能，用來取代復雜的“$.ajax”
語法：
$(selector).get(url,data,success(response,status,xhr),dataType)
參數說明：
| 參數 | 描述 |
|---|---|
| url | 必需。規定將請求發送的哪個 URL。 |
| data | 可選。規定連同請求發送到服務器的數據。 |
| success(response,status,xhr) | 可選。規定當請求成功時運行的函數。
|
| dataType | 可選。規定預計的服務器響應的數據類型。 默認JQ將智能判斷，可能的類型：
|
2.2詳細說明
該函數是簡寫的ajax函數，等價于：
$.ajax({url:url,data:data,success:success,dataType:dataType
});2.3一些例子
2.3.1請求test.php網頁并傳送兩個參數
$.get("test.php",{name:"Bill",time:"2px"});
?2.3.2顯示test返回值
$.get("test.php",function(data){
? ? ? ? alert("返回值是:",data);
});
?三.$.post()方法
3.1$.post()方法介紹
$.post()方法通過HTTP POST請求從服務器上請求數據
語法：
$.post(url,data,success(data,textStatus,jqXHR),dataType);
參數說明：
| 參數 | 描述 |
|---|---|
| url | 必需。規定把請求發送到哪個 URL。 |
| data | 可選。映射或字符串值。規定連同請求發送到服務器的數據。 |
| success(data,textStatus,jqXHR) | 可選。請求成功時執行的回調函數。 |
| dataType | 可選。規定預期的服務器響應的數據類型。 默認執行智能判斷（xml、json、script 或 html） |
3.2詳細說明
該函數是簡寫的ajax函數，等價于：
$.ajax({type:"POST",url:url,data:data,success:success,dataType:dataType
});3.3一些例子
3.3.1請求test.php頁面，并發送一些參數
$.post("test.php",{name:"Bill",time:"2pm"});
 系統信息與系統資源)
