jsp实现实时刷新
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);
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; }
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){
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);
5、 tbody.innerHTML=str; } } xhr.send(null) } function doInterval(){ setInterval("getStock()", 5000);// setInterval(getStock, 5000); } </script></head>
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>