Ajax中的四个方法

本是古典何须时尚 2024-03-26 11:02 51阅读 0赞

#### 文章目录 ####

*  1、load 方法
 *   *  1.1load 方法的使用
 *  2、get 方法
 *   *  2.1get 方法的使用
 *  3、post 方法
 *  4、getJSON

--------------------

## 1、load 方法 ##

> load() 方法让 AJAX 去请求服务器，并从中获得数据，最后将获得的数据放入到指定的元素中。

**其语法格式为：**

$().load(url, data, callback);

**参数说明如下所示：**

*  url 是被加载页面的地址，它是必选参数。
 *  data 是发送到服务器的数据，它是可选参数。
 *  callback 是请求完成后的回调函数，它是可选参数。

`这里请注意，load 方法中的回调函数有三个额外的参数，以下所示：`

*  response：服务器响应的结果数据。
 *  status：服务器响应的状态。
 *  xhr：XMLHttpRequest 对象。

### 1.1load 方法的使用 ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>加载一个 txt 文件</title>
        <script src="jquery-3.6.0.min.js"></script>
        <script>
          $(function () {
          
            $(".text").load("text.txt", function (response, status, xhr) {
          
              $("p").text(
                "请求结果为：" + response + "；" + "请求状态为：" + status
              );
            });
          });
        </script>
      </head>
      <body>
        <div class="text"></div>
        <p></p>
      </body>
    </html>

## 2、get 方法 ##

> get 方法是通过 HTTP GET 请求从服务器请求数据。HTTP 是超文本传输协议，它是客户与服务器之间通信的一种协议，HTTP 有一些请求方法，在这些方法中 GET 和 POST 是最常见的。

$.get(url, data, callback(data, status, xhr), dataType);

`参数说明如下所示：`

*  url：是请求的 url，它是必须参数。
 *  data：是发送到服务器的数据，它是可选参数。
 *  callback：是当请求成功时的回调函数，该方法包含三个参数，data 是请求的结果数据，status 是包含请求的状态，xhr 是 XMLHttpRequest 对象。
 *  dataType：是服务器返回的数据格式，如 xml、html、json 等，默认的 jQuery 会智能判断它的类型。

### 2.1get 方法的使用 ###

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>get</title>
        <script src="jquery-3.6.0.min.js"></script>
        <script>
          $(function () {
          
            $("input").click(function () {
          
              $.get("food.html", function (data, status) {
          
                $("div").html(data);
                $("p").append(status);
              });
            });
          });
        </script>
      </head>
      <body>
        <input type="button" value="加载数据" />
        <p>请求状态为：</p>
        <div></div>
      </body>
    </html>

## 3、post 方法 ##

$.post(url, data, callback(data, textStatus, jqXHR), dataType);

`参数说明如下所示：`

*  url：是请求的 url，它是必须参数。
 *  data：是发送到服务器的数据，它是可选参数。
 *  callback：是当请求成功时的回调函数，该方法包含三个参数，data 是请求的结果数据，textStatus  
    是包含请求的状态，jqXHR 是 XMLHttpRequest 对象。
 *  dataType：是服务器返回的数据格式，如 xml、html、json 等。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>post 方法</title>
        <script src="jquery-3.6.0.min.js"></script>
        <script>
          $(function () {
          
            $("input").click(function () {
          
              // 如果链接失效，可以试试 https://labfile.oss.aliyuncs.com/courses/3774/posts.json
              $.post(
                "https://jsonplaceholder.typicode.com/posts",
                function (data, textStatus) {
          
                  $("p").append(textStatus);
                }
              );
            });
          });
        </script>
      </head>
      <body>
        <input type="button" value="请求数据" />
        <p>请求状态：</p>
      </body>
    </html>

## 4、getJSON ##

$.ajax({
      type: "GET",
      dataType: "json",
      url: url,
      data: data,
      success: success,
    });

**getJSON 相当于是以上内容的缩写。**

> getJSON 其实看名字就很好理解，我们分开来看 get 和 JSON。在前面我们学过 get 方法，这里的 get 就是 GET 请求的意思，JSON 就是 JSON 编码了，把两个词合起来理解就是使用 GET 请求从服务器加载 JSON 格式的数据。

$.getJSON(url [,data] [,success(data, textStatus, jqXHR)])

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>getJSON 方法</title>
        <style>
          ul {
          
            list-style: none;
          }
          body {
          
            text-align: center;
          }
        </style>
        <script src="jquery-3.6.0.min.js"></script>
        <script>
          $(function () {
          
            // 如地址失效，可以使用 https://labfile.oss.aliyuncs.com/courses/3774/users.json
            $("input").click(function () {
          
              $.getJSON(
                "https://jsonplaceholder.typicode.com/users",
                function (data, textStatus) {
          
                  alert(textStatus);
                  $.each(data, function (i, val) {
          
                    $("ul").append("<li>" + val.name + "<li>");
                  });
                }
              );
            });
          });
        </script>
      </head>
      <body>
        <input type="button" value="按照JSON格式加载数据" />
        <ul></ul>
      </body>
    </html>

*  在上面代码中，我们点击页面上的按钮，触发点击事件。
 *  在函数里，使用 $.getJSON 向指定地址发出 GET 请求获取 JSON 格式的数据。
 *  使用 alert(textStatus) 弹出警告框显示请求数据的状态。
 *  使用 $.each(data,function(kay,val) 遍历获取的 JSON 格式的数据。
 *  最后，使用 $(“ul”).append(‘
 *  ’+val.name+‘
 *  ’) 让数据文件中 key 值为 name 的数据项以列表的形式显示在页面上。