一个网页需要多次用到ajax来获取不同的数据怎么写代码
时间: 2024-02-26 15:56:33 浏览: 62
您可以按照以下步骤编写代码:
1. 引入jQuery库或其他支持ajax的JavaScript库
```html
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```
2. 编写ajax请求函数
```javascript
function getData(url, data, successCallback, errorCallback) {
$.ajax({
url: url, // 请求的url地址
type: 'GET', // 请求方式
data: data, // 请求参数
dataType: 'json', // 响应的数据类型
success: function(res) { // 请求成功的回调函数
successCallback(res);
},
error: function(xhr, status, error) { // 请求失败的回调函数
errorCallback(xhr, status, error);
}
});
}
```
3. 调用ajax请求函数获取数据
```javascript
// 第一次请求数据
getData('/api/data1', { id: 1 }, function(res) {
console.log(res);
}, function(xhr, status, error) {
console.log(error);
});
// 第二次请求数据
getData('/api/data2', { id: 2 }, function(res) {
console.log(res);
}, function(xhr, status, error) {
console.log(error);
});
// 第三次请求数据
getData('/api/data3', { id: 3 }, function(res) {
console.log(res);
}, function(xhr, status, error) {
console.log(error);
});
```
在以上代码中,我们先定义了一个 `getData` 函数来发起ajax请求,并传入请求的url地址、请求参数、请求成功和请求失败的回调函数。然后,我们可以在需要获取数据的地方调用 `getData` 函数即可。
阅读全文