Ajax-应用：实现分页

首先我们要清楚为什么要用Ajax实现分页：

Ajax局部刷新技术，相比之前的简易论坛的severlet跳转技术，每次改变都会跳转刷新整个页面。Ajax不用刷新整个页面，只是局部刷新。

这里我分成五点来简述
1.首先在数据库中创建要展示的表，链接数据库，在Javaben中写查询所有要展示内容。

2.编写severlet，在severlet中调用javaben中的方法通过json包返回json文件

3.将从数据库中的找到的数据（保存在list中），转换成json文件（string类型），代码如下：

//商品集合List<Goods> ls=igb.getAllByPage(pageIndex, pageSize);//获取最大页码int max=igb.getMax("goods", pageSize);//把集合转为StringString str=JSON.toJSONString(ls);

4. 在severlet中编写的代码如下：


package com.zking.servlet;import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.alibaba.fastjson.JSON;
import com.zking.biz.GoodsBiz;
import com.zking.biz.IGoodsBiz;
import com.zking.entity.Goods;@WebServlet("/page.do")
public class PageServlet extends HttpServlet{@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置编码方式req.setCharacterEncoding("utf-8");resp.setContentType("text/html; charset=UTF-8");//获取outPrintWriter out=resp.getWriter();int pageIndex=1;int pageSize=5;//接收pidString pid=req.getParameter("pid");if(pid!=null) {pageIndex=Integer.parseInt(pid);}//调用biz层的分页方法IGoodsBiz igb=new GoodsBiz();//商品集合List<Goods> ls=igb.getAllByPage(pageIndex, pageSize);//获取最大页码int max=igb.getMax("goods", pageSize);//把集合转为StringString str=JSON.toJSONString(ls);//把响应输送到客户端out.print(str+"*"+max);//特殊字符做拼接out.flush();out.close();}}

5.在jsp页面的布局和jQ代码如下：

（注）：与之前的severlet跳转不同，我们可以看到，代码中并没有你跳转页面，这时需要编写一个js的文件调用

js布局：

 <center><img src="data:images/17.jpg"><input><div id="aa"></div><div><a href="javascript:myf('a')">首页</a>&nbsp;<a href="javascript:myf('b')">上一页</a>&nbsp;<a href="javascript:myf('c')">下一页</a>&nbsp;<a href="javascript:myf('d')">末页</a>&nbsp;</div></center>

jquery和Ajax 代码：

<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='"+g.gpath+"'/></td>";sb+="</tr>";})sb+="</table>";sb+="["+pageIndex+"/"+max+"]";//给div赋值$("#aa").html(sb);})}
</script>

6.运行：

我们刚进去是怎样一个界面：

(注)：下面文本框是为了让我们更好的了解Ajax是否实现了局部刷新的分页。

Ajax-应用：实现分页相关推荐

.net MvcPager+Ajax无刷新分页
.net MvcPager+Ajax无刷新分页百度网盘链接: https://pan.baidu.com/s/1QmtBVH_sb4O6pNnEIsB5jw 1.新建Asp.net Web项目,重 ...
php页面自分页刷新,详解PHP+AJAX无刷新分页实现方法
PHP+AJAX无刷新分页实现代码详解,最近在看ajax 教程,就想写个简单入门的PHP+AJAX无刷新分页,我们依据ajax开发框架,代码如下: var http_request=false; fu ...
thinkphp ajax 无刷新分页效果的实现
思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...
ajax + laypage实现分页
ajax + laypage实现分页使用laypage实现分页,官网给出的实例如下,由于官网没有从后台获取数据,只是在前端构造了一些数据,在我们实际应用中可能会踩坑,在此做个记录. <!DOC ...
产品ajax无刷新kesion,科讯商业版中用到的ajax空间与分页函数
科讯商业版中用到的ajax空间与分页函数更新时间:2007年09月02日 22:02:32 作者: 科讯sql商业版中用到的ajax空间与分页函数,他们的js代码学习是非常不错的 //ajax ...
IntelliJ IDEA中ajax开发实现分页查询
此文章的图片被简书禁止访问了, 可以上简书查看此文章. 链接如下 https://www.jianshu.com/p/1fd6b39e98ac IntelliJ IDEA中ajax开发实现分页查询文 ...
java ajax无刷分页_简单实现Ajax无刷新分页效果
Ajax无刷新分页效果,如下代码实现 Ajax无刷新分页效果 function showpage(url) { var xhr = new XMLHttpRequest(); xhr.onreadys ...
AJAX+JQUERRY实现分页
============== Windows Phone 7手机开发..Net培训.期待与您交流! ============= JQERRY代码如下: var where = "" ...
基于Jquery+Ajax+Json+高效分页
摘要分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...
c# Ajax后台动态分页
创建WebPager类 public static class WebPager{public static string WebPagerAjax(string Idn, bool IsShort) ...

Ajax-应用：实现分页

Ajax-应用：实现分页相关推荐

最新文章

热门文章