Ajax
Ajax

jQuery 的 AJAX 请求

# jQuery 的 AJAX 请求

# 1. $.get()函数

# 1.1 $.get()函数的语法

// jQuery 中 $.get() 函数的功能是发起 GET 请求，以从服务器获取数据。$.get() 函数的基本语法如下：
$.get(url, [data], [callback])

1
2

url：必需。指定请求的 URL 地址。
data：可选。一个对象，表示要发送到服务器的数据（仅适用于带参数的请求）。
callback：可选。一个函数，服务器返回响应数据后会调用这个函数。

# 1.2 $.get()发起不带参数的请求

// 使用 $.get() 函数发起不带参数的请求时，只需提供请求的 URL 地址和请求成功后的回调函数。示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
    // 这里的 res 是服务器返回的数据
    console.log(res); // 在控制台输出服务器返回的数据
});

1
2
3
4
5
6

说明：这里我们发起了一个 GET 请求到 'http://www.liulongbin.top:3006/api/getbooks'，没有附加额外的请求参数。请求成功后，服务器返回的数据将通过回调函数中的 res 参数传递。

# 1.3 $.get()发起带参数的请求

// 使用 $.get() 发起带参数的请求时，需要在 URL 后附加请求参数。示例代码如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
    // 这里的 res 是服务器返回的数据
    console.log(res); // 在控制台输出服务器返回的数据
});

1
2
3
4
5
6

说明：在这个例子中，我们向服务器发送了一个包含 id 参数的 GET 请求。{ id: 1 } 是一个对象，它将被作为查询字符串附加到请求的 URL 末尾，例如 http://www.liulongbin.top:3006/api/getbooks?id=1。服务器返回的数据会通过回调函数中的 res 参数传递。

# 2. $.post()函数

# 2.1 $.post()函数的语法

// jQuery 中 $.post() 函数的功能是发起 POST 请求，用于向服务器提交数据。$.post() 函数的基本语法如下：
$.post(url, [data], [callback])

1
2

url：必需。指定请求的 URL 地址。
data：可选。一个对象，表示要发送到服务器的数据（POST 请求的主体内容）。
callback：可选。一个函数，服务器返回响应数据后会调用这个函数。

# 2.2 $.post()向服务器提交数据

// 使用 $.post() 向服务器提交数据的示例代码如下：
$.post(
    'http://www.liulongbin.top:3006/api/addbook', // 请求的 URL 地址
    { 
        bookname: '水浒传', // 要提交的数据中的书名
        author: '施耐庵',  // 要提交的数据中的作者名
        publisher: '上海图书出版社' // 要提交的数据中的出版社名
    }, 
    function(res) { // 请求成功后的回调函数
        // 这里的 res 是服务器返回的数据
        console.log(res); // 在控制台输出服务器返回的数据
    }
);

1
2
3
4
5
6
7
8
9
10
11
12
13

说明：在这个例子中，我们向服务器发送了一个 POST 请求到 'http://www.liulongbin.top:3006/api/addbook'。请求的主体内容是一个包含书名、作者和出版社的对象。这些数据会被发送到服务器，服务器处理完数据后将返回响应，回调函数中的 res 参数将包含服务器返回的数据。

# 3. $.ajax()函数的语法

// jQuery 中的 $.ajax() 函数是一个功能强大的通用 Ajax 请求函数，可以用于发起各种类型的 HTTP 请求，并提供详细的配置选项。
// $.ajax() 函数的基本语法如下：
$.ajax({
    type: '', // 请求的方式，例如 'GET' 或 'POST'
    url: '', // 请求的 URL 地址
    data: {}, // 这次请求要携带的数据（仅适用于 POST 或 PUT 请求等）
    dataType: 'json', // 预期的服务器响应的数据类型（例如 'json', 'text', 'xml' 等）
    success: function(res) {}, // 请求成功之后的回调函数
    error: function(xhr, status, error) {}, // 请求失败时的回调函数
    complete: function(xhr, status) {} // 请求完成后的回调函数（无论成功还是失败）
});

1
2
3
4
5
6
7
8
9
10
11

type：指定请求的 HTTP 方法，如 'GET'、'POST'、'PUT'、'DELETE' 等。默认为 'GET'。
url：指定请求的 URL 地址。
data：指定要发送到服务器的数据，通常是一个对象。如果数据为空，则不发送数据。
dataType：指定预期的响应数据类型。常见的有 'json'（默认值）、'text'、'xml' 等。
success：请求成功时调用的回调函数，接收服务器返回的数据作为参数。
error：请求失败时调用的回调函数，接收 xhr（XMLHttpRequest 对象）、status（错误信息）和 error（错误文本）作为参数。
complete：请求完成后（成功或失败）调用的回调函数，接收 xhr 和 status 作为参数。

# 3.1 使用$.ajax()发起GET请求

// 使用 $.ajax() 发起 GET 请求时，type 属性设置为 'GET'。示例代码如下：
$.ajax({
    type: 'GET', // 请求的方式
    url: 'http://www.liulongbin.top:3006/api/getbooks', // 请求的 URL 地址
    data: { id: 1 }, // 这次请求要携带的数据，将附加在 URL 后面作为查询参数
    dataType: 'json', // 预期的响应数据类型
    success: function(res) { // 请求成功后的回调函数
        // 服务器返回的数据
        console.log(res); // 在控制台输出返回的数据
    },
    error: function(xhr, status, error) { // 请求失败时的回调函数
        console.error('请求失败：', error); // 在控制台输出错误信息
    },
    complete: function(xhr, status) { // 请求完成后的回调函数
        console.log('请求完成，状态：', status); // 在控制台输出请求完成状态
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

说明：在这个例子中，我们发起了一个 GET 请求到 'http://www.liulongbin.top:3006/api/getbooks'。data 参数中的 { id: 1 } 会被附加到 URL 末尾，形成查询字符串（如 http://www.liulongbin.top:3006/api/getbooks?id=1）。success 回调函数用于处理成功响应，error 回调函数用于处理错误，complete 回调函数在请求完成后执行。

# 3.2 使用$.ajax()发起POST请求

// 使用 $.ajax() 发起 POST 请求时，type 属性设置为 'POST'。示例代码如下：
$.ajax({
    type: 'POST', // 请求的方式
    url: 'http://www.liulongbin.top:3006/api/addbook', // 请求的 URL 地址
    data: { // 要提交给服务器的数据
        bookname: '水浒传', // 书名
        author: '施耐庵', // 作者
        publisher: '上海图书出版社' // 出版社
    },
    dataType: 'json', // 预期的响应数据类型
    success: function(res) { // 请求成功后的回调函数
        // 服务器返回的数据
        console.log(res); // 在控制台输出返回的数据
    },
    error: function(xhr, status, error) { // 请求失败时的回调函数
        console.error('请求失败：', error); // 在控制台输出错误信息
    },
    complete: function(xhr, status) { // 请求完成后的回调函数
        console.log('请求完成，状态：', status); // 在控制台输出请求完成状态
    }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

说明：在这个例子中，我们发起了一个 POST 请求到 'http://www.liulongbin.top:3006/api/addbook'。data 参数中的对象将作为请求的主体内容发送给服务器。success 回调函数用于处理成功响应，error 回调函数用于处理错误，complete 回调函数在请求完成后执行。

# 4 接口

# 4.1 通过GET方式请求接口的过程

# 4.2 通过POST方式请求接口的过程

编辑此页

上次更新: 2024/12/28, 18:32:08

← 初识Ajax 原生 XHR请求→