jQuery 方便了JavaScript的使用，提供了封装库
ajax 后台请求
jQuery 中的 $.ajax() 函数是一个强大的工具，用于通过 HTTP 请求与服务器进行异步通信。它是 jQuery 库中处理 Ajax 请求的核心方法，可以向服务器发送请求，并处理服务器返回的数据，支持多种数据类型和各种配置选项。
基本语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| $.ajax({
url: '请求的URL',
type: 'GET' or 'POST', // 请求方法，默认为GET
data: {}, // 发送到服务器的数据（可选）
dataType: 'json', // 服务器响应的数据类型（如json, xml, text等）
success: function(response) {
// 请求成功后的回调函数
},
error: function(xhr, status, error) {
// 请求失败时的回调函数
},
complete: function(xhr, status) {
// 请求完成后的回调函数（无论成功还是失败）
}
});
|
参数解释
url：请求的 URL 地址（必填）。type：请求方法，常见有 'GET'、'POST'、'PUT'、'DELETE' 等，默认为 'GET'。data：发送给服务器的数据，通常是一个对象或序列化的表单数据。dataType：预期服务器返回的数据类型（如：'json'、'xml'、'html'、'text' 等）。它用于告知 jQuery 如何处理响应数据。success：请求成功时的回调函数，接收服务器返回的数据作为参数。error：请求失败时的回调函数，接收三个参数：xhr（XMLHttpRequest对象），status（错误状态），error（错误信息）。complete：请求完成时的回调函数，无论请求成功或失败都会触发。
示例
1. GET 请求
1
2
3
4
5
6
7
8
9
10
11
| $.ajax({
url: 'https://api.example.com/data',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log('获取数据成功：', data);
},
error: function(xhr, status, error) {
console.log('请求失败：', error);
}
});
|
2. POST 请求
1
2
3
4
5
6
7
8
9
10
11
12
| $.ajax({
url: 'https://api.example.com/submit',
type: 'POST',
data: { name: 'John', age: 30 },
dataType: 'json',
success: function(response) {
console.log('提交成功：', response);
},
error: function(xhr, status, error) {
console.log('提交失败：', error);
}
});
|
3. 带有表单数据的 POST 请求
1
2
3
4
5
6
7
8
9
10
11
| $.ajax({
url: 'https://api.example.com/form',
type: 'POST',
data: $('#myForm').serialize(), // 序列化表单数据
success: function(response) {
console.log('表单提交成功：', response);
},
error: function(xhr, status, error) {
console.log('表单提交失败：', error);
}
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| $.ajax({
url: 'https://api.example.com/protected',
type: 'GET',
headers: {
'Authorization': 'Bearer ' + token // 添加认证token
},
success: function(data) {
console.log('请求成功，受保护数据：', data);
},
error: function(xhr, status, error) {
console.log('请求失败：', error);
}
});
|
常见选项
timeout：设置请求超时的时间（以毫秒为单位）。如果请求超过这个时间未完成，将会触发 error 回调。
1
2
3
4
5
6
7
8
9
10
11
12
| $.ajax({
url: 'https://api.example.com/data',
timeout: 5000, // 超时设置为 5 秒
success: function(data) {
console.log('数据加载成功');
},
error: function(xhr, status, error) {
if (status === 'timeout') {
console.log('请求超时');
}
}
});
|
cache：控制请求是否使用缓存。默认为 true，如果不希望使用缓存，可以设置为 false。
1
2
3
4
5
6
7
| $.ajax({
url: 'https://api.example.com/data',
cache: false, // 禁止缓存
success: function(data) {
console.log('数据加载成功');
}
});
|
beforeSend：在请求发送之前执行的回调函数。可以用于修改请求头或其他设置。
1
2
3
4
5
6
7
8
9
| $.ajax({
url: 'https://api.example.com/data',
beforeSend: function(xhr) {
xhr.setRequestHeader('X-Custom-Header', 'value'); // 设置自定义请求头
},
success: function(data) {
console.log('数据加载成功');
}
});
|
$.ajax() 与简化版本
jQuery 提供了几个简化版本的 Ajax 方法，常用于常见的 GET 和 POST 请求：
$.get()：简化的 GET 请求。
1
2
3
| $.get('https://api.example.com/data', function(data) {
console.log(data);
});
|
$.post()：简化的 POST 请求。
1
2
3
| $.post('https://api.example.com/submit', { name: 'John' }, function(response) {
console.log(response);
});
|
总结
$.ajax() 是 jQuery 提供的一个非常灵活和强大的方法，适用于多种场景。它使得与服务器进行异步通信变得更加简单，能够处理各种 HTTP 请求，支持各种数据类型，并提供了丰富的配置选项来满足不同需求。
