Ajax与JavaWeb分页

最新推荐文章于 2022-12-16 21:07:44 发布

Boogie_97

最新推荐文章于 2022-12-16 21:07:44 发布

阅读量3k

点赞数

分类专栏： JavaEE JS 文章标签： ajax javascript html gson-工具 javaweb

本文链接：https://blog.csdn.net/qq_38070608/article/details/80139731

版权

JavaEE 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

Ajax

Ajax：Ajax 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新

Ajax：Asynchronous JavaScript and XML，异步 javascript和
XML，带来用户体验改变，是web优化一种主要手段

AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象

传统web交互模型，浏览器直接将请求发送给服务器，服务器回送响应，直接发给浏览器， Ajax交互模型，浏览器首先将请求发送给Ajax引擎（以XMLHttpRequest为核心），AJax引擎再将请求发送给服务器，服务器回送响应先发给Ajax引擎，再由引擎传给浏览器显示。

同步交互模式：客户端提交请求，等待，在响应回到客户端前，客户端无法进行其他操作
异步交互模型：客户端将请求提交给Ajax引擎，客户端可以继续操作，由Ajax引擎来完成与服务武器端通信，当响应回来后，Ajax引擎会更新客户页面，在客户端提交请求后，用户可以继续操作，而无需等待。

jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或
JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

四种Ajax

1.$(“”).load(“url地址”,data参数,function(){回调函数，返回的时候执行});
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
必需： URL 参数：规定希望加载的 URL。
可选： data 参数：规定与请求一同发送的查询字符串键/值对集合。
可选： callback 参数：是 load() 方法完成后所执行的函数名称。

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8" />
         <title></title>
         <script src="js/jquery-3.2.1.min.js"></script>
         <style type="text/css">
             div{
                 width: 60px;
                 height: 60px;
                 background-color: aquamarine;
                 margin: 2px;
             }
                 </style>
         <script>
             $(document).ready(function(){
               $("#btn1").click(function(){
                 $('#test').load('js/jquery-3.2.1.min.js');
               })
             })
         </script>
     </head>
     <body>
         <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
         <button id="btn1" type="button">获得外部的内容</button>
     </body>
 </html>

2.$.get(...);
3.$.post(...);
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.ajax({
url:"传给谁",
data:(参数),
type:"post/get",
dateType:"html/text/json",
success:function(data){
},
error:function(msg){
}
});

这里以新闻的前段分页实现和Servlet的后端操作为例。
这里引用了bootstarp的小例子：
具体项目点我下载
前端页面如代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
    contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"></link>
<link rel="stylesheet" href="css/public.css" type="text/css"></link>
<link rel="stylesheet" href="css/style.css" type="text/css"></link>
</head>

<body>
    <table width="50%" border="1" align="center">
        <caption>
            <h1 style="height: 50px;line-height5:0px;border: 1px">帖子列表</h1>
        </caption>
        <thead>
            <tr>
                <td colspan="5" align="center"><div>
                        帖子标题：<input type="text" name="title">
                        <button type="button" onclick="javascript:load(0)" id="search">搜索</button>
                    </div></td>
            </tr>
            <tr class="t_head">
                <th>新闻编号</th>
                <th>新闻标题</th>
                <th>图片位置</th>
                <th>创建时间</th>
            </tr>
        </thead>
        <tbody id="list-content">
        </tbody>
    </table>
    <div class="pagination" id="pagination"></div>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="js/jquery.pagination.js"></script>
    <script type="text/javascript">
        //默认初始化
        load(0);
        //点击查询的触发事件
        function load(pageNum){
            $.ajax({
                //需要提交的服务器地址
                url:"test",
                //请求的方式
                type:"post",
                //传递给服务器的参数
                data:{"pageNum":pageNum},
                //回调函数
                success:function(data){
                    var data=$.parseJSON(data);
                    //每次清空数据,防止每次点击都叠加
                    $("#list-content").html('');
                    //追加数据  data.list表示需要遍历的对象  list必须是实体类pageInfo中的list属性名
                    $.each(data.list,function(i,news){
                        //一个dom就是一个用户对象
                        $("#list-content").append("<tr><td>" + news.id + "</td><td>" + news.title + "</td><td>" + news.img + "</td><td >" + dom.createTime + "</td>"+"<td><a href=/findReplysByInVid/"+news.id+">查看回复</a>"+"||<a href=javascript:del("+news.id+")>删除</a></td> "  +"</tr>");
                    });
                    //渲染分页  总记录数  当前页码   每页数据量
                    //total/pageSize都是实体类pageInfo里的。不能随意改变名字
                    $("#pageination").pagination(data.total,{
                        //当前是第几页
                        current_page:pageNum,
                        items_per_page:data.pageSize,
                        //回调函数
                        callback:load,
                        num_edge_enteries:2,
                        //不能改变的参数
                        load_first_page:true,
                        prev_show_alaways:false,
                        next_show_alaways:false,
                        preCls:'prev', //上一页class
                        nextCls:'next',//协下一页class
                        prev_text:'上一页',
                        next_text:'下一页'
                    });
                }
            });
        }
    </script>
</body>
</html>

后台servlet如代码所示：
前后台数据传输使用了Google的gson的jar包

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        //设置响应编码格式
        req.setCharacterEncoding("utf-8");
        //调用servicenew出对象
        NewsService service = new NewsServiceImpl();
        PageInfo<News> news = service.findAlls(
                Integer.parseInt(req.getParameter("pageNum")), 3);
        news.setTotal(service.getTotalCount());
        System.out.println("pageNum=====>" + req.getParameter("pageNum"));      news.setPageNum(Integer.parseInt(req.getParameter("pageNum")));
        System.out.println("总记录数===》" + news.getTotal());
        Gson gson = new Gson();
        String json = gson.toJson(news);
        System.out.println(json);
        // 获取输出流对象
        PrintWriter writer = resp.getWriter();
        writer.print(json); // 返回数据给前台
        writer.close();
    }

独立设置一个分页JavaBean：
在set记录数时，就判断是否要多创一个页面

public class PageInfo<T> implements Serializable {
    // 当前页
    private int pageNum = 1;
    // 每页的数量
    private int pageSize = 3;

    // 总记录数
    private int total;
    // 总页数
    private int pages;
    // 结果集
    private List<T> list;

    public PageInfo() {
    }

    public int getPageNum() {
        return pageNum;
    }

    public void setPageNum(int pageNum) {
        this.pageNum = pageNum;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        if (total > 0) {
            this.total = total;
            // 获取总页数
            this.pages = (total % pageSize == 0) ? (total / pageSize) : (total
                    / pageSize + 1);
        }
    }

    public int getPages() {
        return pages;
    }

    public void setPages(int pages) {
        this.pages = pages;
    }

    public List<T> getList() {
        return list;
    }

    public void setList(List<T> list) {
        this.list = list;
    }
}

service层和dao层如代码所示：

    /**
     * 查询所有的新闻信息
     */
    @Override
    public PageInfo<News> findAlls(int pageNum, int pageSize) {
        PageInfo<News> pageInfo = new PageInfo<>();
        // 给pageInfo对象的list集合赋值
        pageInfo.setList(dao.findAlls(pageNum, pageSize));
        return pageInfo;
    }
    /**
     *  获取新闻总页数
     */
        @Override
    public int getTotalCount() {
        return dao.getTotalCount();
    }
    @Override
    public List<News> findAlls(int pageNum, int pageSize) {
        String sql = "select * from easybuy_News limit ?,?";
        // 创建一个集合来保存所有的用户
        List<News> newss = new ArrayList<>();
        Object[] params = { pageNum, pageSize };
        try {
            rs = myExcuteQuery(sql, params);
            newss = ResultSetUtil.findAll(rs, News.class);
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            closeConnection();
        }
        return newss;
    }
    @Override
    public int getTotalCount() {
        String sql = "select count(*) as count from easybuy_News";
        int count = 0;
        try {
            rs = myExcuteQuery(sql);
            if (rs.next()) {
                count = rs.getInt("count");
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            closeConnection();
        }
        return count;
    }

Boogie_97

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Ajax与JavaWeb分页

Ajax Ajax：Ajax 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新 Ajax：Asynchronous JavaScript and XML，异步 javascript和 XML，带来用户体验改变，是web优化一种主要手段AJAX = DHTML (HTML、CSS、JavaScript ) + XMLHttpRequest 对象传
复制链接

扫一扫