发送ajax请求,进行分页查询
时间: 2023-08-05 18:11:45 浏览: 48
好的,假设你已经有了后端提供的接口,可以使用以下步骤进行分页查询:
1. 定义一个变量 `currentPage` 表示当前页码,初始值为 1。
2. 定义一个函数 `getData`,用于发送 AJAX 请求获取数据。
3. 在 `getData` 函数中,发送 AJAX 请求,携带当前页码 `currentPage` 和每页显示的数量 `pageSize`。
4. 在请求成功的回调函数中,将返回的数据渲染到页面上。
5. 定义两个按钮,一个是上一页按钮,一个是下一页按钮。给这两个按钮绑定点击事件,分别将 `currentPage` 加一或减一,然后调用 `getData` 函数重新获取数据。
以下是示例代码:
```html
<!-- HTML 结构 -->
<div id="data-list"></div>
<button id="prev">上一页</button>
<button id="next">下一页</button>
```
```javascript
// JS 代码
let currentPage = 1;
const pageSize = 10;
function getData() {
$.ajax({
url: '/api/data',
data: { currentPage, pageSize },
success: function (res) {
// 渲染数据到页面
$('#data-list').html(res.data);
}
});
}
$('#prev').on('click', function () {
if (currentPage > 1) {
currentPage--;
getData();
}
});
$('#next').on('click', function () {
currentPage++;
getData();
});
```
注意:以上代码仅供参考,实际应用还需要根据具体情况进行修改。