ajax jquery实现分页

模仿以上代码


html js部分

<body onload="loadData()">
<h2>评论区</h2>
<table id="mytable">
    <tr>
        <th>name</th>
        <th>评论</th>
        <th>score</th>
    </tr>

</table>
<button onclick="reducePage()">上一页</button>
<button onclick="addPage()">下一页</button>
//跳转到指定页面,可以获取输入框的值
<script>
    var currentPage = 1;
    var gid = ${goods.id};
    function addPage() {
        currentPage = currentPage + 1;
        loadData();
    }

    function reducePage() {
        currentPage = currentPage - 1;
        loadData();
    }

    function loadData() {

        // $(".detail").remove();//每次从api获取值时,先清除表格tr的内容
        $.ajax({
            url:"GetCommentsController",
            method:"get",
            data:"currentPage="+currentPage+"&gid="+gid,
            success:function (result) {
                $(".detail").remove();//每次从api获取值时,先清除表格tr的内容
                var results = JSON.parse(result);
                for(var i=0;i<results.length;i++){
                    var id = results[i].id;
                    var content = results[i].content;
                    var user = results[i].user.name;
                    var score = results[i].score;
                    appendData(content,user,score);
                }
            }
        });
    }
    function appendData(content,user,score) {
        var text = '<tr class="detail"><td>'+user+'</td><td>'+content+'</td><td>'+score+'</td></tr>';
        console.log(text);
        $('#mytable').append(text);
    }

servlet部分

@WebServlet(name = "GetCommentsController",urlPatterns = {"/GetCommentsController"})
public class GetCommentsController extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        String gid = request.getParameter("gid");
        String currentPage = request.getParameter("currentPage");
        System.out.println(gid+" "+currentPage);
        CommentService cs = new CommentServiceImpl();
        Goods goods = new Goods();
        goods.setId(Integer.parseInt(gid));
        Page page = new Page();
        page.setNum(3);
        page.setCurrentPage(Integer.parseInt(currentPage));
        page.setTotal(PageUtil.totalByGoods(Integer.parseInt(gid),3));
        List<Comment> commentList= cs.getAllComments(goods,page);
        Gson gson = new Gson();
        String str = gson.toJson(commentList);
        System.out.println(str);
        response.getWriter().write(str);


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值