Ajax，无刷新分页

z466764

2024-04-20 帮助1人

简介:
一：Ajax是什么?

ajax是只刷新局部页面的技术,全名是 Asynchr onous(异步的) JavaScript And Xml

同步和异步：

同步：发送请求后还需等待结果才可进行下一步

异步：发送请求可以不等结果直接开始下一步

JavaScript：更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果（Ajax技术的核心）

CSS：美化页面样式

二: 为什么用Ajax?

无刷新：不刷新整个页面，只刷新局部

无刷新的好处只更新部分页面，有效利用带宽，提高用户体验

三:如何使用ajax实现分页?

实现原理：

设置Servlet的response的格式为json
借助于jackson库的ObjectMapper类将分页数据转换为json字符串的形式.
使用response的writer写出内容.
在前端jsp页面接收数据,并将数据格式化为html文本,写入到指定html元素中

主界面：index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="https://blog.csdn.net/z466764/article/details/js/jquery-3.3.1.js"></script>

<script type="text/javascript">
//页面载入函数
$(function(){
//默认显示第1页
myf('a');
})
//扩大作用域
var pageIndex;
var max;
//写一个方法专门控制分页
function myf(type){
if(type=='a'){
//首页
pageIndex=1;
}
else if(type=='b'){
//上一页
if(pageIndex>1){
pageIndex--;
}
else{
alert("兄die，已经是第一页了嘞");
}
}
else if(type=='c'){
//下一页
if(pageIndex<max){
pageIndex ;
}
else{
alert("兄die，已经是最后一页了嘞");
}
}
else{
//末页
pageIndex=max;
}
//ajax
$.post("page.do", {pid:pageIndex}, function(data) {
//用*分割
var x=data.split("*");
//x[0]代表json格式的对象数组字符串
//x[1]代表max值
//将json格式的对象数组字符串-->js的对象数组
var ss=$.parseJSON(x[0]);
//给max赋值
max=parseInt(x[1]);
var sb="<table border=\"1px\"><tr align='center'><td>商品序号</td><td>商品名称</td><td>商品图片</td></tr>";
//循环遍历
$.each(ss, function(i, g) {//下标，元素=对象
sb ="<tr align='center'>";
sb ="<td>" g.gid "</td>";
sb ="<td>" g.gname "</td>";
sb ="<td><img src='https://blog.csdn.net/z466764/article/details/123808107" g.gpath "'/></td>";
sb ="</tr>";
})
sb ="</table>";
sb ="[" pageIndex "/" max "]";
//给div赋值
$("#aa").html(sb);
})
}
</script>
</head>
<body>
<center>
<input>
<div id="aa"></div>
<div>
<a href="javascript:myf('a')">首页</a> 
<a href="javascript:myf('b')">上一页</a> 
<a href="javascript:myf('c')">下一页</a> 
<a href="javascript:myf('d')">末页</a> 
</div>
</center>
</body>
</html>

这篇好文章是转载于：学新通技术网

Ajax，无刷新分页

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开