jquery如何實作Ajax請求

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 += &#39;<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中文網其他相關文章！