jQuery如何使用ajax()方法？解析和代码示例

ajax()方法在jQuery中用于执行AJAX请求或异步HTTP请求。

语法如下：

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

参数：可能值的列表如下：

type：它用于指定请求的类型。
url：它用于指定将请求发送到的URL。
usrname：它用于指定在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, state)：该功能将在请求完成时运行。
contentYtpe：默认值为：" application /x-www-form-urlencoded", 在数据发送到服务器时使用。
context：它用于为所有与AJAX相关的回调函数指定" this"值。
data：它用于指定要发送到服务器的数据。
dataFilter(data, type)：它用于处理XMLHttpRequest的原始响应数据。
password：它用于指定在HTTP访问认证请求中使用的密码。
processData：默认值为true。它用于指定是否将与请求一起发送的数据转换为查询字符串。
scriptCharset：它用于指定请求的字符集。
sucess(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">
         lsbin
     <   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">
         lsbin
     </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>

输出如下：

单击按钮之前：

单击按钮后：

更多前端开发相关内容请参考：lsbin - IT开发技术：https://www.lsbin.com/

查看以下更多JS相关的内容：

jQuery如何使用ajax()方法？解析和代码示例

猜你喜欢