jquery實作Ajax請求的方法：1、「$.ajax()」方法；2、「$.post()」方法，程式碼為「$.post(url, data, func, dataType) ;」；3、「$.get()」方法，程式碼為「$.get(url, data, func, dataType);」；4、「$.getJSON()」方法等等。
本教學作業系統：Windows10系統、jQuery3.6.0版本、Dell G3電腦。
jquery實作Ajax請求
Ajax用於無需刷新整個頁面而進行瀏覽器與伺服器的通信，伺服器將不再返回整個頁面，而是返回部分數據，透過JavaScript的DOM操作對節點進行更新。資料傳輸格式有xml、json等格式，但常用的是json格式。
我們可以使用JavaScript的物件XMLHttpRequest來實作原生Ajax，但這種方法比較複雜，不易寫。 jQuery已經封裝了Ajax，使得發起Ajax請求比較容易，本文簡單介紹jQuery實作Ajax的過程：
1、在標籤中引入jquery.js檔案
#<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
2、幾種常見jQuery的Ajax方法
#（1）$.ajax()
# ①url：連結位址，字串表示
②data：(可選) 要傳送給伺服器的數據，GET與POST都可以，將自動轉換為請求字串格式，以Key/value的鍵值對形式表示，會做為QueryString附加到請求URL中，格式為{A: '…', B: '…'}
③type：“POST” 或“GET”，請求類型
④timeout：請求超時時間，單位為毫秒，數值表示
⑤cache：是否快取請求結果，bool表示
⑥contentType：內容類型，預設為"application/x-www-form-urlencoded"
⑦dataType：伺服器回應的資料類型，字串表示；當填寫為json時，回呼函數中無需再對資料反序列化為json
⑧success：請求成功後，伺服器回呼的函數
⑨error：請求失敗後，伺服器回呼的函數
⑩complete：請求完成後呼叫的函數，無論請求是成功或失敗，都會呼叫函數；如果設定了success與error函數，則函數在它們之後被呼叫
⑪async：是否非同步處理，bool表示，預設為true；設定該值為false後，JS不會向下執行，而是原地等待伺服器返回數據，並完成相應的回調函數後，再向下執行
⑫username：存取認證請求中攜帶的用戶名，字串表示
⑬password：傳回認證請求中所攜帶的密碼，字串表示
<script type="text/javascript">
function login1(){
$.ajax({
//${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名
url: "${pageContext.request.contextPath}/user/returnJson",
type: "GET",
data:'{name: 'James'}', //必须是字符串格式
contentType:"application/json", //指定内容格式
dataType:json,
success: function(data) { //括号里的data是服务器返回的数据
console.log(data);
document.getElementById("myDiv").innerText=data["name"];
}
});
}
</script><script>
$('#btn1').click(function () {
$.ajax({
type:"post", //提交方式
url:'${pageContext.request.contextPath}/JSONServlet',
data:{
bookname: $("#bookname").val()//val() 方法返回或设置被选元素的值。
},
dataType: "json", //返回数据的格式
success:function (responseData) {
var html = "";
$('#dataTable tr:not(:first)').remove(); //删除第一行之外的所有行
// $('#dataTable > tbody > tr').remove(); // 删除所有行，表头会被删除
console.log(responseData);
for (var i = 0; i < responseData.length; i++) {
html += '<tr>';
html += '<td>'+responseData[i].bookid+'</td>'+'<td>'+responseData[i].bookname+'</td>'+'<td>'+responseData[i].price+'</td>'
html += '</tr>';
}
$('#dataTable').append(html);
},
});
});
</script>#(2）$.post()
使用POST方式執行Ajax請求，從伺服器載入數據。
形式：$.post(url, data, func, dataType);
可選參數：
①url：連結位址，字串表示
②data：需要發送到伺服器的數據，格式為{A: '…', B: '…'}
③func：請求成功後，伺服器回呼的函數；function(data, status, xhr)，其中data為伺服器回傳的數據，status為回應狀態， xhr為XMLHttpRequest對象，個人感覺關注data參數即可
④dataType：伺服器返回資料的格式
<script type="text/javascript">
function login2(){
$.post(
"${pageContext.request.contextPath}/user/returnJson",
'{name: 'James'}',
"application/json",
function(data) {
console.log(data);
document.getElementById("myDiv").innerText=data["name"];
}
);
}
</script>（3）$.get()
#使用GET方式執行Ajax請求，從伺服器載入資料。
形式：$.get(url, data, func, dataType);
<script type="text/javascript">
function login3(){
$.get(
"${pageContext.request.contextPath}/user/returnJson",
function(data) {
console.log(data);
document.getElementById("myDiv").innerText=data["name"];
}
);
}
</script>（4）$.getJSON()
形式：$.getJSON (url, data, func);
使用GET方式執行Ajax請求，從伺服器載入JSON格式資料。
<script type="text/javascript">
function login4(){
$.getJSON(
"${pageContext.request.contextPath}/user/returnJson",
function(data) {
console.log(data);
document.getElementById("myDiv").innerText=data["name"];
}
);
}
</script>注意：因為確定伺服器傳回的資料格式為json，因此該方法不必再指定dataType。
（5）$.load()
將伺服器載入的資料直接插入指定DOM中的某個節點。
形式：$.load(url, data, func);
其中data如果存在則使用POST方式發送請求，不存在則使用GET方式發送請求。
<div id="myRes"></div>
function login5() {
$('#myRes').load(
"${pageContext.request.contextPath}/user/returnJson",
'{name: 'James'}',
"application/json"
);
}以上是jquery如何實作Ajax請求的詳細內容。更多資訊請關注PHP中文網其他相關文章！
