JQuery ajax()用法及代碼示例

jQuery中的ajax()方法用於執行AJAX請求或異步HTTP請求。

用法:

$.ajax({name:value, name:value, ... })

參數：可能值的列表如下：

type:它用於指定請求的類型。
url:它用於指定將請求發送到的URL。
username:它用於指定在HTTP訪問認證請求中使用的用戶名。
xhr:它用於創建XMLHttpRequest對象。
async:默認值為true。它指示是否應異步處理請求。
beforeSend(xhr)：該函數將在發送請求之前運行。
dataType:服務器響應的預期數據類型。
error(xhr, status, error):它用於在請求失敗時運行。
global:默認值為true。它用於指定是否觸發請求的全局AJAX事件句柄。
ifModified:默認值為false。它用於指定請求是否僅在自上一個請求以來響應已更改的情況下才成功。
jsonp:覆蓋jsonp請求中的回調函數的字符串。
jsonpCallback:它用於為jsonp請求中的回調函數指定名稱。
cache:默認值為true。它指示瀏覽器是否應緩存請求的頁麵。
complete(xhr, status): 該函數將在請求完成時運行。
contentType:默認值為：“ application /x-www-form-urlencoded”，當數據發送到服務器時使用。
context:它用於為所有與AJAX相關的回調函數指定“this”值。
data:它用於指定要發送到服務器的數據。
dataFilter(data, type): 它用於處理XMLHttpRequest的原始響應數據。
password:它用於指定在HTTP訪問認證請求中使用的密碼。
processData:默認值為true。它用於指定是否應將與請求一起發送的數據轉換為查詢字符串。
scriptCharset:它用於指定請求的字符集。
success(result, status, xhr):請求成功時將運行它。
timeout:這是請求的本地超時。單位為毫秒。
traditional:它用於指定是否使用傳統風格的參數序列化。

範例1：本示例使用ajax()方法使用ajax請求添加文本內容。

<!DOCTYPE html> 
<html> 
      
<head>  
    <title> 
        jQuery ajax() Method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function() { 
            $("li:parent").css("background-color", "green"); 
        }); 
    </script> 
</head>  
  
<body style="text-align:center;"> 
  
    <h1 style="color:green"> 
        GeeksForGeeks 
    </h1> 
      
    <h2> 
        jQuery ajax() Method 
    </h2> 
      
    <h3 id="h11"></h3> 
      
    <button>Click</button> 
      
    <!-- Script to use ajax() method to 
        add text content -->
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                $.ajax({url: "geeks.txt",  
                        success: function(result) { 
                    $("#h11").html(result); 
                }}); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

輸出：

單擊按鈕之前：
單擊按鈕後：

範例2：本示例說明了jQuery中的ajax()方法。

<!DOCTYPE html> 
<html> 
  
<head>  
    <title> 
        jQuery ajax() Method 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
      
    <script> 
        $(document).ready(function() { 
            $("li:parent").css("background-color", "green"); 
        }); 
    </script> 
</head>  
  
<body style="text-align:center;"> 
   
    <h1 style="color:green"> 
        GeeksForGeeks 
    </h1> 
      
    <h2>jQuery ajax() Method</h2> 
      
    <h3 id="h11"></h3> 
      
    <button>Click</button> 
      
    <!-- Script to use ajax() method to 
        add text content -->
    <script> 
        $(document).ready(function(){ 
            $("button").click(function(){ 
                $.ajax({url: "geeks_exp.txt", async: false, 
                                success: function(result) { 
                    $("h11").html(result); 
                }}); 
            }); 
        }); 
    </script> 
</body> 
  
</html>

輸出：

單擊按鈕之前：
單擊按鈕後：

相關用法

注：本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 jQuery | ajax() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。