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

最新推荐文章于 2024-05-20 17:54:41 发布

夏天和雨伞

最新推荐文章于 2024-05-20 17:54:41 发布

阅读量283

点赞数

分类专栏： javascript 前端文章标签： jquery js ajax http

本文链接：https://blog.csdn.net/u014240783/article/details/115363191

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端

13 篇文章 0 订阅

订阅专栏

本文通过两个示例详细介绍了jQuery中的ajax()方法，展示了如何使用它进行异步HTTP请求，以及如何处理请求的成功和失败。示例1演示了点击按钮后加载外部文本文件并显示在页面上的过程，而示例2则展示了设置async为false以同步执行请求的方法。通过这些例子，读者可以更好地理解ajax()方法在前端开发中的应用。

摘要由CSDN通过智能技术生成

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>

输出如下：

单击按钮之前：