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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。