实际开发中，我们可能会需要系统某个界面的某一块实时显示最新的数据，整个页面跳转刷新可能会影响到该页面中需求之外的数据，这就要让需要的这一块内容自动刷新。讲得有点绕，直接进入正文，已餐桌管理为例，实时了解每个餐桌的使用状态（空闲、就餐）。
前置条件：耐性100%；IDEA2019；MySQL5.7；ssm框架；PageHelper分页；模糊查询；


文章目录

  • 数据库创建表（餐桌管理为例）
  • 创建对应实体类
  • 创建Dao方法
  • 创建service接口及实现类
  • 创建控制器
  • 创建jsp页面
  • 编写JavaScript
  • 结尾


数据库创建表（餐桌管理为例）

餐桌号，人数，餐桌状态

idea一直提示更新索引期间_intellij idea

创建对应实体类

package com.qiang.domain;

import lombok.Data;

/**
 * @author Mr.锵
 * date 2020-02-21
 */
@Data
public class Table1 {
    private String tableid;
    private Integer people_num;
    private  String status;
}

创建Dao方法

简单的查一下餐桌信息

package com.qiang.dao;

import com.qiang.domain.Table1;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * @author Mr.锵
 * date 2020-02-23
 */
@Repository
public interface ITableDao {
    /**
     * 查询所有餐桌
     * @return
     */
    List<Table1> findAll(@Param("taid") String taid,@Param("penum") Integer penum,@Param("tasta") String tasta);
}

创建service接口及实现类

接口

package com.qiang.service;

import com.github.pagehelper.PageInfo;
import com.qiang.domain.Table1;
import org.apache.ibatis.annotations.Select;

/**
 * @author Mr.锵
 * date 2020-02-23
 */
public interface ITableService {
    /**
     * 查询所有餐桌
     * @return
     */
    PageInfo<Table1> findAll(Integer num,String taid,Integer penum,String tasta);
    }

实现类

package com.qiang.service.impl;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.qiang.dao.ITableDao;
import com.qiang.domain.Table1;
import com.qiang.service.ITableService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author Mr.锵
 * date 2020-02-23
 */
@Service("tableService")
public class ITableServiceImpl implements ITableService {
    @Autowired
    private ITableDao tableDao;
    @Override
    public PageInfo<Table1> findAll(Integer num,String taid,Integer penum,String tasta) {
        PageHelper.startPage(num,8);
        List<Table1> all = tableDao.findAll(taid,penum,tasta);
        PageInfo<Table1> table1PageInfo = new PageInfo<>(all);
        return table1PageInfo;
    }
}

创建控制器

两个方法，一个是全局跳转，一个是ajax请求（用@ResponseBody封装返回结果）

package com.qiang.controller;

import com.github.pagehelper.PageInfo;
import com.qiang.domain.Table1;
import com.qiang.service.ITableService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;

/**
 * @author Mr.锵
 * date 2020-02-23
 */
@Controller
@RequestMapping("/table")
public class TableController {
    @Autowired
    private ITableService tableService;
    @RequestMapping("/findAll")
    public ModelAndView findAll(@RequestParam(required = false,defaultValue ="1") Integer num,
                                @RequestParam(required = false) String taid,
                                @RequestParam(required = false) Integer  penum,
                                @RequestParam(required = false) String   tasta){
        ModelMap modelMap=new ModelMap();
        //调用service的方法
        PageInfo<Table1> list = tableService.findAll(num,taid,penum,tasta);
        modelMap.addAttribute("tablelist",list);
        modelMap.addAttribute("taid",taid);
        modelMap.addAttribute("penum",penum);
        modelMap.addAttribute("tasta",tasta);
        ModelAndView mv=new ModelAndView("tablelist",modelMap);
        return mv;
    }
    @RequestMapping("/findAll2")
    public @ResponseBody PageInfo findAll2(@RequestParam(required = false,defaultValue ="1") Integer num,
                                           @RequestParam(required = false) String  taid,
                                           @RequestParam(required = false) Integer  penum,
                                           @RequestParam(required = false) String   tasta){
        //调用service的方法
        PageInfo<Table1> list = tableService.findAll(num,taid,penum,tasta);
        return list;
    }
}

创建jsp页面

这里样式用了bootstrap框架，可以忽略，主要是实现逻辑，都是前几篇博客涉及到的知识点

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/2/20
  Time: 14:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>tablelist</title>
    <link rel="stylesheet" href="../css/bootstrap.css" type="text/css">
    <style>
        body{
            background-color: whitesmoke;
        }
        table{
            table-layout:fixed;
        }
        td{
            overflow:hidden;
            white-space:nowrap;
            text-overflow:ellipsis;
        }
        .inner-container {
            position: absolute; left: 0;
            overflow-x: hidden;
            overflow-y: scroll;
        }
        /* for Chrome 只针对谷歌浏览器*/
        .inner-container::-webkit-scrollbar {
            display: none;
        }
        .right{
            float: right;
            padding-right: 50px;
            margin-top: -30px;
        }
    </style>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
</head>
<body class="inner-container">
<div class="table-responsive">
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <td >餐桌号</td>
            <td>可坐人数</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>
                <input type="text" name="tableid" id="addtaid" placeholder="请输入餐桌号" value="${taid}" class="form-control"/>
            </td>
            <td>
                <input type="text" name="people_num" id="addtanum" placeholder="请输入人数" value="${penum}" class="form-control"/>
            </td>
            <td><input type="text" name="people_num" id="addtastatus" placeholder="请输入状态"  value="${tasta}"class="form-control"/></td>
            <td>
                <button id="addtablebtn" type="button" class="btn btn-warning">添加</button>
            </td>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${tablelist.list}" var="table">
            <tr>
                <td title="${table.tableid}">${table.tableid}</td>
                <td title="${table.tableid}">${table.people_num}</td>
                <td title="${table.status}" id="status">${table.status}</td>
                    <c:choose>
                    <c:when test="${table.status=='用餐中'}">
                        <td><a href="../table/updatetablestatus?tableid=${table.tableid}&&status=空闲&&num=${tablelist.pageNum}"><button class='btn btn-success'>空闲</button></a></td>
                    </c:when>
                    <c:otherwise >
                        <td><a href="../table/updatetablestatus?tableid=${table.tableid}&&status=用餐中&&num=${tablelist.pageNum}"><button class='btn btn-primary'>就餐</button></a></td>
                    </c:otherwise>
                </c:choose>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<div class="hhh">第${tablelist.pageNum}页，共${tablelist.pages}页/${tablelist.total}条</div>
<%--    分页条--%>
<nav aria-label="Page navigation" class="right">
    <ul class="pagination">
        <c:choose>
            <c:when test="${tablelist.isFirstPage}">
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">首</span></a></li>
            </c:when>
            <c:otherwise>
                <li>
                    <a href="" aria-label="Previous" id="front">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <li>
                    <a href="" aria-label="Previous" id="first">
                        <span aria-hidden="true">首</span>
                    </a>
                </li>
            </c:otherwise>
        </c:choose>
        <c:forEach items="${tablelist.navigatepageNums}" var="num">
            <c:choose>
                <c:when test="${num==tablelist.pageNum}">
                    <li class="active" value="${num}">
                        <span>${num}<span class="sr-only">(current)</span></span>
                    </li>
                </c:when>
                <c:otherwise>
                    <li><a href="" class="aurlcenter" onclick='gonum("${num}")'>${num}</a></li>
                </c:otherwise>
            </c:choose>
        </c:forEach>
        <c:choose>
            <c:when test="${tablelist.isLastPage}">
                <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">尾</span></a></li>
                <li class="disabled"><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
            </c:when>
            <c:otherwise>
                <li>
                    <a href="" aria-label="Next" id="last">
                        <span aria-hidden="true">尾</span>
                    </a>
                </li>
                <li>
                    <a href="" aria-label="Next" id="next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </c:otherwise>
        </c:choose>
    </ul>
</nav>
</body>
</html>

编写JavaScript

  • ajax请求成功后调用$(“tbody”).html("")方法清空表格内容，然后循环调用 $(“tbody”).append("")方法将请求到的数据重新加入表格中，实现局部刷新功能；
  • 使用 $(“tbody”).append("")重画表格时要格外仔细，因为比较繁琐，容易出错；
  • 通过setInterval(function x(),2000）计数器，每2秒调用一次请求函数，实现自动刷新功能
<script>
        setInterval(function (){
            var tableid=$("#addtaid").val(),
                peoplenum=$("#addtanum").val(),
                status=$("#addtastatus").val();
            $.ajax({
                url : "../table/findAll2",
                datatype : "json",
                type : "post",
                data:{
                    num:$(".active").val(),
                    taid:tableid,
                    penum:peoplenum,
                    tasta:status
                },
                success : function(data) {
                    var pagenum=$(".active").val()
                    //清空表格数据
                    $("tbody").html("");
                    //动态刷新表格
                    for (var i = 0; i < data.list.length; i++) {
                        var table="<tr>"
                            +"<td title='"+data.list[i].tableid+"'>"+data.list[i].tableid+"</td>"
                            +"<td title='"+data.list[i].people_num+"'>"+data.list[i].people_num+"</td>"
                            +"<td title='"+ data.list[i].status +"' id='status'>"+ data.list[i].status +"</td>";
                        if(data.list[i].status=='用餐中'){
                            var btn="<td><a href=\"../table/updatetablestatus?tableid="+data.list[i].tableid+"&&status=空闲&&num="+pagenum+"\"><button class='btn btn-success'>空闲</button></a></td>"
                            +"</tr>";}
                        else if(data.list[i].status=='空闲'){
                            var btn="<td><a href=\"../table/updatetablestatus?tableid="+data.list[i].tableid+"&&status=用餐中&&num="+pagenum+"\"><button class='btn btn-primary'>就餐</button></a></td>"
                                +"</tr>";}
                        var all=table+btn;
                        $("tbody").append(all);
                    }
                    $(".pagination").html("");
                    if(data.isFirstPage){
                        var first="<li class=\"disabled\"><a href=\"#\" aria-label=\"Previous\"><span aria-hidden=\"true\">«</span></a></li>" +
                            "<li class=\"disabled\"><a href=\"#\" aria-label=\"Previous\"><span aria-hidden=\"true\">首</span></a></li>";
                    }
                    else if(!data.isFirstPage){
                        var first="<li><a href=\"../table/findAll?num="+(data.prePage)+"&&tableid="+tableid+"&&peoplenum="+peoplenum+"&&status="+status+"\" aria-label=\"Previous\">\n" +
                            "                        <span aria-hidden=\"true\">«</span></a></li>" +
                            "<li><a href=\"../table/findAll?num=1&&tableid="+tableid+"&&peoplenum="+peoplenum+"&&status="+status+"\" aria-label=\"Previous\">\n" +
                            "                        <span aria-hidden=\"true\">首</span></a></li>";
                    }
                    var center="";
                    for(var i=0;i<data.navigatepageNums.length;i++){
                        if(data.navigatepageNums[i]==data.pageNum){
                            var now="<li class=\"active\" value="+data.navigatepageNums[i]+">\n" +
                                "                        <span>"+data.navigatepageNums[i]+"</span>\n" +
                                "                    </li>";
                        }else if(data.navigatepageNums[i]!=data.pageNum){
                            var now="<li><a href=\"../table/findAll?num="+data.navigatepageNums[i]+"&&tableid="+tableid+"&&peoplenum="+peoplenum+"&&status="+status+"\">"+data.navigatepageNums[i]+"</a></li>";
                        }
                        center=center+now;
                    }
                    if(data.isLastPage){
                        var last="<li class=\"disabled\"><a href=\"#\" aria-label=\"Next\"><span aria-hidden=\"true\">尾</span></a></li>" +
                            "<li class=\"disabled\"><a href=\"#\" aria-label=\"Next\"><span aria-hidden=\"true\">»</span></a></li>";
                    }
                    else if(!data.isLastPage){
                        var last="<li><a href=\"../table/findAll?num="+(data.pages)+"&&tableid="+tableid+"&&peoplenum="+peoplenum+"&&status="+status+"\" aria-label=\"Previous\">\n" +
                            "                        <span aria-hidden=\"true\">尾</span></a></li>" +
                            "<li><a href=\"../table/findAll?num="+(data.nextPage)+"&&tableid="+tableid+"&&peoplenum="+peoplenum+"&&status="+status+"\" aria-label=\"Previous\">\n" +
                            "                        <span aria-hidden=\"true\">»</span></a></li>";
                    }
                    var all=first+center+last;
                    $(".pagination").append(all);
                    $(".hhh").html("");
                    var hhh="第"+data.pageNum+"页，共"+data.pages+"页/"+data.total+"条";
                    $(".hhh").append(hhh);
                }
            });
        },2000);
        $(function () {
            $("#addtablebtn").click(function () {
                if($("#addtaid").val()==""){
                    alert("餐桌号不能为空");
                    $("#addtaid").focus();
                    return false;
                }
                else if($("#addtanum").val()==""){
                    alert("可坐人数不能为空");
                    $("#addtanum").focus();
                    return false;
                }
                else{
                    $.ajax({
                        url : "../table/savetable",
                        datatype : "json",
                        data:{'tableid':$("#addtaid").val(),'people_num':$("#addtanum").val()},
                        type : "post",
                        success : function(data) {
                            if(data){
                                alert("添加成功");
                            return ture;}
                        }
                    });
                }
            });
            $("#front").click(function () {
                $("#front").attr("href","../table/findAll?num=${tablelist.prePage}&&tasta="+$("#addtastatus").val()+"&&taid="+$("#addtaid").val()+"&&penum="+$("#addtanum").val()+"")
            });
            $("#first").click(function () {
                $("#first").attr("href","../table/findAll?num=1&&tasta="+$("#addtastatus").val()+"&&taid="+$("#addtaid").val()+"&&penum="+$("#addtanum").val()+"")
            });
            $("#last").click(function () {
                $("#last").attr("href","../table/findAll?num=${orderlist.pages}&&tasta="+$("#addtastatus").val()+"&&taid="+$("#addtaid").val()+"&&penum="+$("#addtanum").val()+"")
            });
            $("#next").click(function () {
                $("#next").attr("href","../table/findAll?num=${orderlist.nextPage}&&tasta="+$("#addtastatus").val()+"&&taid="+$("#addtaid").val()+"&&penum="+$("#addtanum").val()+"")
            });
        })
        function gonum(num) {
            $(".aurlcenter").attr("href","../table/findAll?num="+num+"&&tasta="+$("#addtastatus").val()+"&&taid="+$("#addtaid").val()+"&&penum="+$("#addtanum").val()+"")
        }
    </script>

结尾

ajax局部刷新可以实现很多功能，例如实时统计在线人数，实时查看订单情况、排队情况等，在实际开发中会经常涉及到。

感觉有用就点个赞呗~

下一篇Excel表格批量导入