jsp实现实时刷新

2025-10-22 17:46:52

1、建立数据库

create table sale(

   s_id  int(11) primary  key   auto_increment,

   s_name  varchar(30),

   s_qty  int(11)

);

模拟数据库中的数据

insert into sale(s_id,s_name,s_qty)values(1,'apple',3000);

jsp实现实时刷新

2、数据库连接,可以参考我之前的经验

我这里直接写的jsp全部代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="js/my.js"></script><style type="text/css"> #d0{  background: black;  height:310px;  width: 500px;  margin: auto;  margin-top: 50px; }

jsp实现实时刷新

3、 #d1{  background: yellow;  font-style: italic;  text-align: center;  color: red; } #d2{  background: pink;  height: 275px; } #table1{  border: 1px solid;  font-size: 15px; }</style> <script type="text/javascript" >     function getStock(){      var xhr = getXhr();      var tbody=$("t1");      xhr.open('get','sale.do',true);      xhr.onreadystatechange=function(){       if(xhr.readyState==4&&xhr.status==200){ 

jsp实现实时刷新

4、                       var text = xhr.responseText;        var sales = JSON.parse(text);        var str="";        for(var i=0;i<sales.length;i++){         var sale = sales[i];         //alert(stock.name+" "+stock.price+" "+stock.stockNo)          str += "<tr><td>"+sale.id+"</td><td>"+sale.name+            "</td><td>"+sale.qty+"</td></tr>";        }        //alert(str);   

jsp实现实时刷新

5、     tbody.innerHTML=str;       }      }      xhr.send(null)     }     function doInterval(){      setInterval("getStock()", 5000);//       setInterval(getStock, 5000);     }    </script></head>

jsp实现实时刷新

jsp实现实时刷新

6、<body style="font-size: 30px" onload="doInterval()"><div id="d0"> <div id="d1">实时热卖</div> <div id="d2">  <table cellspacing="1" cellpadding="1

</body></html>

jsp实现实时刷新

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢