【项目笔记】数据库插入一条数据后前端自动弹窗提醒，JS定时刷新检测是否插入新的数据

---

前言

此篇就web项目中的插入一条数据后前端自动提醒的功能进行实现，编写代码中遇到的问题进行记录。后端采用了最原始的servlet技术+JDBC技术。

---

一、弹窗提醒

此项目我采用了后端去获取表的记录数，一旦某一次访问的记录总数大于了上一次的存储的记录总数说明有新的数据进行了插入，故在前端进行弹窗提醒。

1.后端获取记录总数

servlet：

 Integer total;
        RockDao rockDao = new RockDao();
        total = rockDao.getTotal();
        response.setContentType("text/plain;charset=utf-8");
        PrintWriter pw = response.getWriter();
        pw.println(total);
        pw.flush();
        pw.close();

Dao：

//获取对象总的记录数
    public int getTotal() {
        int total = 0;
        try {  Class.forName("com.mysql.jdbc.Driver");
               conn = DriverManager.getConnection(url, username, password);
             String sql = "SELECT COUNT(*) total FROM 表名";
            pst = conn.prepareStatement(sql);
            rs = pst.executeQuery();
            if(rs.next()){      total = rs.getInt(1); }
            System.out.print(total);
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (pst != null) {  pst.close();      }
                if (conn != null) {    conn.close();      }
            } catch (SQLException e) {
                e.printStackTrace();
            }} 
            return total;}

2.tips：获取记录数的三种方法

知识原帖来自于此篇文章：获取数据库表的记录数
JDBC中sql语句的执行方式有两种：

int rs = ps.executeUpdate();
//执行增删改，返回值代表更新计数
ResultSet rs = ps.executeQuery();
//执行查，返回值表示结果集

获取数据库的记录总数的sql语句返回的是int型，但是不能用executeUpdate()，因为它属于查询语句。

①方法一：通过遍历返回结果集ResultSet来获取

PreparedStatement ps = null;
String sql = "select * from 表名";
ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
int count=0;//总的记录数
while (rs.next()) {
    count++;
}
return count;

②方法二：获取数据库表的记录数

PreparedStatement ps = null;
String sql = "select * from users";
ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
rs.last();//移动到ResultSet的最后一行
int count = rs.getRow();
 //获得当前行号，也就是记录数
return count;

③方法三：使用sql语句获取

PreparedStatement ps = null;
String sql = "select count(*) from users";
ps = conn.prepareStatement(sql);
ResultSet rs = ps.executeQuery();
int count=0;
if(rs.next()){
    count=rs.getInt(1);
//ResultSet结果集中的第一个参数就是记录数，
//其实结果集中只有一个参数
}
return count;

3.前端去接收后端传回的记录总数

一旦后端查询的总数与之前存储的数字不一样则证明插入了新的数据，故进行if比较然后提醒。

 function doAjaxGetTotal(){
        $.ajax({
            url:"getTotal",
            type:"get",
            dataType:"text",
            success:function (resp) {
                total = localStorage.getItem('Total');
                if(total!=resp){
                    alert("数据库插入了一条新的数据！");
                    total = resp;
                    localStorage.setItem('Total',total);
                }    }   })   }

ps：此处使用了localStorage保存上一次保留的总记录数
访问当前域名下的本地Storage对象，并通过Storage.setItem（）增加了一个数据项目。

var total = 10;
localStorage.setItem('Total',total);
//将10赋值给了‘Total’，使用键值方式存储的
var test = localStorage.getItem('Total');
//此时test的值即为10

localStorage.clear();
//清除本地缓存保留的键值信息

二、JS定时刷新检测的实现

此项目采用的是setInterval（function（），1000）间隔一秒不断循环刷新

window.setInterval(function(){
            doAjaxGetTotal();
        },2000);

ps：function中间是功能而不是 window.location.reload(); 这样不用刷新整个页面，而只用刷新某个功能，就不会出现闪烁的现象。 测试的时候使用 window.location.reload();就会一直循环不断刷新整个页面，就会出现闪烁的现象。

ps：定时刷新的各种方法

①JS定时器：

setInterval(function(){}, 1000);
//间隔1000毫秒不断循环刷新
setTimeout( doAjaxGetTotal();,1000);
//延迟刷新，隔了1000毫秒就进行刷新，但是只刷新一次

②设置meta

 <!--定时自动刷新，content表示刷新间隔，
 单位为秒s，下面代码表示页面每隔三秒刷新一次-->
 <meta http-equiv="refresh" content="3">

<!--定时跳转另一个页面，
content第一个参数表示间隔时间，单位为秒，
第二个参数表示目标网址，但是如果把第二个参数设为#，
就会实现页面刷新。-->
<meta http-equiv="refresh" content="3;url=#">

③额外的跳转+刷新方法

history.go(0) 
location.reload() 
location=location 
location.assign(location) 
document.execCommand('Refresh') 
window.navigate(location) 
location.replace(location) 
document.URL=location.href

---

结束语

浅浅记录一下做项目时遇到的笔记+搜查的一些资料