使用JSON数据格式模拟股票实时信息
2015-06-14 15:30
513 查看
JQueryStock.html
Stock.java
GetStocksInfo.java
jquerystock.js
web.xml
JSON格式相当于是键值对对象
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>itcast.cn的JQuery实例:动态股票信息</title> <script type="text/javascript" src="../jslib/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="../jslib/jquerystock.js"></script> </head> <body> <div id="300001"><a href="#">上证指数:</a><span></span></div> <div id="000001"><a href="#">浦发银行:</a><span></span></div> <div id="stock"> <div id="yes">昨收:<span></span></div> <div id="tod">今开:<span></span></div> <div id="now">当前:<span></span></div> </div> </body> </html>
Stock.java
/** * Created by IntelliJ IDEA. * User: ming * Date: 2008-6-14 * Time: 9:29:13 * To change this template use File | Settings | File Templates. * 用于保存股票的基本信息 */ public class Stock { /** * 昨天的收盘价 */ private double yesterday; /** * 今天的开盘价 */ private double today; /** * 当前价 */ private double now; /** * 股票名称 */ private String name; /** * 股票代码 */ private String id; public Stock(double yesterday, double today, String name, String id) { this.yesterday = yesterday; this.today = today; this.name = name; this.id = id; this.now = today; } public double getYesterday() { return yesterday; } public void setYesterday(double yesterday) { this.yesterday = yesterday; } public double getToday() { return today; } public void setToday(double today) { this.today = today; } public double getNow() { return now; } public void setNow(double now) { this.now = now; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getId() { return id; } public void setId(String id) { this.id = id; } public String toString() { return this.name + ":" + this.now; } }
GetStocksInfo.java
import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import javax.servlet.ServletConfig; import java.io.IOException; import java.io.PrintWriter; import java.util.HashMap; /** * Created by IntelliJ IDEA. * User: ming * Date: 2008-6-14 * Time: 9:35:50 * To change this template use File | Settings | File Templates. * 返回股票当前信息的servlet */ public class GetStocksInfo extends HttpServlet { //保存股票对象的map private HashMap<String,Stock> stocks; protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { System.out.println("进入后台计算"); //返回两只股票的价格信息 //1。计算随机数 double sz = Math.random() * 20; double pf = Math.random() * 0.5; //通过随机数是奇数还是偶数来判断股票上涨还是下跌 boolean flagsz = ((int)(Math.random() * 10)) % 2 == 0; boolean flagpf = ((int)(Math.random() * 10)) % 2 == 0; //2。将随机数和股票的当前价格进行加或减的操作,得到新的当前价格 Stock szzs = stocks.get("300001"); Stock pfyh = stocks.get("000001"); double temp; if (flagsz) { temp = szzs.getNow() + sz; } else { temp = szzs.getNow() - sz; } //需要对新的当前价格进行截取,只保留小数点后两位 temp = (int)(temp * 100) / 100.0; szzs.setNow(temp); if (flagpf) { temp = pfyh.getNow() + pf; } else { temp = pfyh.getNow() - pf; } temp = (int)(temp * 100) / 100.0; pfyh.setNow(temp); httpServletResponse.setContentType("text/html;charset=UTF-8"); PrintWriter out = httpServletResponse.getWriter(); //out.println(szzs + "<br />" + pfyh); //3。返回两只股票的昨天收盘,今天开盘和当前价格 //采用json的数据格式返回股票的信息 StringBuilder builder = new StringBuilder(); //采用数组的方式回传两个股票对象 /* builder.append("[{name:\"").append(szzs.getName()).append("\",id:\"").append(szzs.getId()) .append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday()) .append(",now:").append(szzs.getNow()) .append("},") .append("{name:\"").append(pfyh.getName()).append("\",id:\"").append(pfyh.getId()) .append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday()) .append(",now:").append(pfyh.getNow()) .append("}]"); */ //采用对象的方式回传两个股票对象 //如果回传表示对象的json,需要在最外层加上一个括号,否则页面解析会出错 builder.append("({") .append("\"").append(szzs.getId()).append("\":{name:\"").append(szzs.getName()) .append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday()) .append(",now:").append(szzs.getNow()) .append("},") .append("\"").append(pfyh.getId()).append("\":{name:\"").append(pfyh.getName()) .append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday()) .append(",now:").append(pfyh.getNow()) .append("}})"); out.println(builder); } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest, httpServletResponse); } public void init(ServletConfig servletConfig) throws ServletException { stocks = new HashMap<String,Stock>(); //创建股票 Stock szzs = new Stock(3000.0,2990.1,"上证指数","300001"); Stock pfyh = new Stock(23.22, 23.50,"浦发银行","000001"); //将两只股票保存在stocks的map中 stocks.put(szzs.getId(),szzs); stocks.put(pfyh.getId(),pfyh); System.out.println(stocks); } }
jquerystock.js
//期望进入页面后就可以开始从服务器段获取数据,然后显示股票价格 //保存服务器段返回的股票对象 var obj; var sid; $(document).ready(function() { //页面载入时隐藏弹出框 var stockNode = $("#stock").css("border","1px solid black").width("150px") .css("position","absolute").css("z-index","99").css("background-color","blue") .css("color","yellow"); stockNode.hide(); var as = $("a"); //定义鼠标进入股票名称时的操作 as.mouseover(function(event){ //获取到当前股票的代码 var aNode = $(this); var divNode = aNode.parent(); sid = divNode.attr("id"); //找到对应的股票对象 updatediv(); //需要控制弹出框的位置 /* //1.找到当前连接的位置 var offset = aNode.offset(); //2。设置弹出框的位置 stockNode.css("left",offset.left + "px").css("top",offset.top + aNode.height() + "px"); */ //期望出现在鼠标的右下方 var myEvent = event || window.event; stockNode.css("left",myEvent.clientX + 5 + "px").css("top",myEvent.clientY + 5 + "px"); //弹出框显示 stockNode.show(); }); //定义鼠标离开股票名称时的操作 as.mouseout(function() { //弹出框隐藏 stockNode.hide() }) getInfo(); //3。每隔一秒钟和服务器交互一次,用户不用刷新页面就可以不断地看到最新的股票信息 setInterval(getInfo,1000); }); //从服务器段获取数据并显示在页面上的的方法 function getInfo() { //1。向服务器发起请求,获取数据 $.get("/Lesson6_jQuery_Demo1/GetStockInfo", null, function(data) { //2.接收并解析数据 obj = eval(data); //2.1获取两只股票的当前指数信息 var szzs = obj["300001"]; //obj.300001 var pfyh = obj["000001"]; /* 遍历一个js的对象 for (var stockid in obj) { var stock = obj[stockid]; } */ //2.2找到页面中对应的节点,然后填充最新的股票价格 var span3 = $("#300001").children("span"); span3.html(szzs.now); if (szzs.now > szzs.yes) { //当前价格大于昨天收盘,则显示红色 span3.css("color","red"); } else { span3.css("color","green"); } var span1 = $("#000001").children("span"); span1.html(pfyh.now); if (pfyh.now > pfyh.yes) { //当前价格大于昨天收盘,则显示红色 span1.css("color","red"); } else { span1.css("color","green"); } updatediv(); }) } //更新弹出框中得内容 function updatediv() { var stockobj = obj[sid]; for (var proname in stockobj) { if (proname != "name") { //找到对应的弹出框中的div节点,然后找到span字节点,将数据填充 $("#" + proname).children("span").html(stockobj[proname]); } } }
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1"> <servlet> <servlet-name>GetStockInfo</servlet-name> <servlet-class>GetStocksInfo</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>GetStockInfo</servlet-name> <url-pattern>/GetStockInfo</url-pattern> </servlet-mapping> </web-app>
JSON格式相当于是键值对对象
相关文章推荐
- Gson解析复杂的json数据
- 有关保存文件时的编码选项与html/jsp页面设定字符编码的配置
- 浅尝JSTL标准标签库
- EL表达式不能用于js文件中,一般用于jsp文件
- Javascript 内存管理
- js加载等待,js进度等待
- 【译】Javascript中的数据类型
- JavaScript 开发的45个经典技巧
- js性能优化
- “好程序员训练营”——JavaScript笔记
- js 将json字符串转换为json对象的方法解析
- Javascript 闭包
- Json转换利器Gson之实例一-简单对象转化和带泛型的List转化
- JSP(3) ----JDBC编程2
- js 调用 DOM js练习入门
- Js-字符串截取substring,分割split,指标indexOf,拼接John
- JavaScript中的Math.SQRT1_2属性使用简介
- js-回车事件控制
- 简介JavaScript中Math.LOG10E属性的使用
- js比较年月日或者日期年月日时分秒大小