JQueryStock.html

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>itcast.cn的JQuery实例：动态股票信息</title>
  5.     <script type="text/javascript" src="../jslib/jquery-2.1.4.min.js"></script>
  6.     <script type="text/javascript" src="../jslib/jquerystock.js"></script>
  7. </head>
  8. <body>
  9. <div id="300001"><a href="#">上证指数:</a><span></span></div>
  10. <div id="000001"><a href="#">浦发银行:</a><span></span></div>
  11. <div id="stock">
  12.     <div id="yes">昨收：<span></span></div>
  13.     <div id="tod">今开：<span></span></div>
  14.     <div id="now">当前：<span></span></div>
  15. </div>
  16. </body>
  17. </html>

Stock.java

  1. /**
  2.  * Created by IntelliJ IDEA.
  3.  * User: ming
  4.  * Date: 2008-6-14
  5.  * Time: 9:29:13
  6.  * To change this template use File | Settings | File Templates.
  7.  * 用于保存股票的基本信息
  8.  */
  9. public class Stock {
  10.     /**
  11.      * 昨天的收盘价
  12.      */
  13.     private double yesterday;
  14.     /**
  15.      * 今天的开盘价
  16.      */
  17.     private double today;
  18.     /**
  19.      * 当前价
  20.      */
  21.     private double now;
  22.     /**
  23.      * 股票名称
  24.      */
  25.     private String name;
  26.     /**
  27.      * 股票代码
  28.      */
  29.     private String id;
  30.  
  31.     public Stock(double yesterday, double today, String name, String id) {
  32.         this.yesterday = yesterday;
  33.         this.today = today;
  34.         this.name = name;
  35.         this.id = id;
  36.         this.now = today;
  37.     }
  38.  
  39.     public double getYesterday() {
  40.         return yesterday;
  41.     }
  42.  
  43.     public void setYesterday(double yesterday) {
  44.         this.yesterday = yesterday;
  45.     }
  46.  
  47.     public double getToday() {
  48.         return today;
  49.     }
  50.  
  51.     public void setToday(double today) {
  52.         this.today = today;
  53.     }
  54.  
  55.     public double getNow() {
  56.         return now;
  57.     }
  58.  
  59.     public void setNow(double now) {
  60.         this.now = now;
  61.     }
  62.  
  63.     public String getName() {
  64.         return name;
  65.     }
  66.  
  67.     public void setName(String name) {
  68.         this.name = name;
  69.     }
  70.  
  71.     public String getId() {
  72.         return id;
  73.     }
  74.  
  75.     public void setId(String id) {
  76.         this.id = id;
  77.     }
  78.  
  79.     public String toString() {
  80.         return this.name + ":" + this.now;
  81.     }
  82. }

GetStocksInfo.java

  1. import javax.servlet.http.HttpServlet;
  2. import javax.servlet.http.HttpServletRequest;
  3. import javax.servlet.http.HttpServletResponse;
  4. import javax.servlet.ServletException;
  5. import javax.servlet.ServletConfig;
  6. import java.io.IOException;
  7. import java.io.PrintWriter;
  8. import java.util.HashMap;
  9.  
  10. /**
  11.  * Created by IntelliJ IDEA.
  12.  * User: ming
  13.  * Date: 2008-6-14
  14.  * Time: 9:35:50
  15.  * To change this template use File | Settings | File Templates.
  16.  * 返回股票当前信息的servlet
  17.  */
  18. public class GetStocksInfo extends HttpServlet {
  19.     //保存股票对象的map
  20.     private HashMap<String,Stock> stocks;
  21.     protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
  22.         System.out.println("进入后台计算");
  23.         //返回两只股票的价格信息
  24.  
  25.         //1。计算随机数
  26.         double sz = Math.random() * 20;
  27.         double pf = Math.random() * 0.5;
  28.  
  29.         //通过随机数是奇数还是偶数来判断股票上涨还是下跌
  30.         boolean flagsz = ((int)(Math.random() * 10)) % 2 == 0;
  31.         boolean flagpf = ((int)(Math.random() * 10)) % 2 == 0;
  32.  
  33.         //2。将随机数和股票的当前价格进行加或减的操作，得到新的当前价格
  34.         Stock szzs = stocks.get("300001");
  35.         Stock pfyh = stocks.get("000001");
  36.         double temp;
  37.         if (flagsz) {
  38.             temp = szzs.getNow() + sz;
  39.         } else {
  40.             temp = szzs.getNow() - sz;
  41.         }
  42.         //需要对新的当前价格进行截取，只保留小数点后两位
  43.         temp = (int)(temp * 100) / 100.0;
  44.         szzs.setNow(temp);
  45.         if (flagpf) {
  46.             temp = pfyh.getNow() + pf;
  47.         } else {
  48.             temp = pfyh.getNow() - pf;
  49.         }
  50.         temp = (int)(temp * 100) / 100.0;
  51.         pfyh.setNow(temp);
  52.  
  53.         httpServletResponse.setContentType("text/html;charset=UTF-8");
  54.         PrintWriter out = httpServletResponse.getWriter();
  55.         //out.println(szzs + "<br />" + pfyh);
  56.         //3。返回两只股票的昨天收盘，今天开盘和当前价格
  57.         //采用json的数据格式返回股票的信息
  58.         StringBuilder builder = new StringBuilder();
  59.         //采用数组的方式回传两个股票对象
  60.         /*
  61.         builder.append("[{name:\"").append(szzs.getName()).append("\",id:\"").append(szzs.getId())
  62.                 .append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
  63.                 .append(",now:").append(szzs.getNow())
  64.                 .append("},")
  65.                 .append("{name:\"").append(pfyh.getName()).append("\",id:\"").append(pfyh.getId())
  66.                 .append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
  67.                 .append(",now:").append(pfyh.getNow())
  68.                 .append("}]");
  69.         */
  70.         //采用对象的方式回传两个股票对象
  71.         //如果回传表示对象的json，需要在最外层加上一个括号，否则页面解析会出错
  72.         builder.append("({")
  73.                 .append("\"").append(szzs.getId()).append("\":{name:\"").append(szzs.getName())
  74.                 .append("\",yes:").append(szzs.getYesterday()).append(",tod:").append(szzs.getToday())
  75.                 .append(",now:").append(szzs.getNow())
  76.                 .append("},")
  77.                 .append("\"").append(pfyh.getId()).append("\":{name:\"").append(pfyh.getName())
  78.                 .append("\",yes:").append(pfyh.getYesterday()).append(",tod:").append(pfyh.getToday())
  79.                 .append(",now:").append(pfyh.getNow())
  80.                 .append("}})");
  81.         out.println(builder);
  82.  
  83.     }
  84.  
  85.     protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
  86.         doGet(httpServletRequest, httpServletResponse);
  87.     }
  88.  
  89.     public void init(ServletConfig servletConfig) throws ServletException {
  90.         stocks = new HashMap<String,Stock>();
  91.         //创建股票
  92.         Stock szzs = new Stock(3000.0,2990.1,"上证指数","300001");
  93.         Stock pfyh = new Stock(23.22, 23.50,"浦发银行","000001");
  94.  
  95.         //将两只股票保存在stocks的map中
  96.         stocks.put(szzs.getId(),szzs);
  97.         stocks.put(pfyh.getId(),pfyh);
  98.  
  99.         System.out.println(stocks);
  100.     }
  101. }

jquerystock.js

  1.  //期望进入页面后就可以开始从服务器段获取数据，然后显示股票价格
  2.  //保存服务器段返回的股票对象
  3.  var obj;
  4.  var sid;
  5.  $(document).ready(function() {
  6.      //页面载入时隐藏弹出框
  7.      var stockNode = $("#stock").css("border","1px solid black").width("150px")
  8.          .css("position","absolute").css("z-index","99").css("background-color","blue")
  9.          .css("color","yellow");
  10.      stockNode.hide();
  11.      var as = $("a");
  12.      //定义鼠标进入股票名称时的操作
  13.      as.mouseover(function(event){
  14.          //获取到当前股票的代码
  15.          var aNode = $(this);
  16.          var divNode = aNode.parent();
  17.          sid = divNode.attr("id");
  18.          //找到对应的股票对象
  19.          updatediv();
  20.  
  21.          //需要控制弹出框的位置
  22.          /*
  23.           //1.找到当前连接的位置
  24.           var offset = aNode.offset();
  25.           //2。设置弹出框的位置
  26.           stockNode.css("left",offset.left + "px").css("top",offset.top + aNode.height() + "px");
  27.           */
  28.          //期望出现在鼠标的右下方
  29.          var myEvent = event || window.event;
  30.          stockNode.css("left",myEvent.clientX + 5 + "px").css("top",myEvent.clientY + 5 + "px");
  31.  
  32.          //弹出框显示
  33.          stockNode.show();
  34.  
  35.      });
  36.      //定义鼠标离开股票名称时的操作
  37.      as.mouseout(function() {
  38.          //弹出框隐藏
  39.          stockNode.hide()
  40.      })
  41.      getInfo();
  42.      //3。每隔一秒钟和服务器交互一次，用户不用刷新页面就可以不断地看到最新的股票信息
  43.      setInterval(getInfo,1000);
  44.  });
  45.  
  46.  //从服务器段获取数据并显示在页面上的的方法
  47.  function getInfo() {
  48.      //1。向服务器发起请求，获取数据
  49.      $.get("/Lesson6_jQuery_Demo1/GetStockInfo", null, function(data) {
  50.          //2.接收并解析数据
  51.          obj = eval(data);
  52.          //2.1获取两只股票的当前指数信息
  53.          var szzs = obj["300001"];  //obj.300001
  54.          var pfyh = obj["000001"];
  55.          /*
  56.           遍历一个js的对象
  57.           for (var stockid in obj) {
  58.           var stock = obj[stockid];
  59.           }
  60.           */
  61.          //2.2找到页面中对应的节点，然后填充最新的股票价格
  62.          var span3 = $("#300001").children("span");
  63.          span3.html(szzs.now);
  64.          if (szzs.now > szzs.yes) {
  65.              //当前价格大于昨天收盘，则显示红色
  66.              span3.css("color","red");
  67.          } else {
  68.              span3.css("color","green");
  69.          }
  70.          var span1 = $("#000001").children("span");
  71.          span1.html(pfyh.now);
  72.          if (pfyh.now > pfyh.yes) {
  73.              //当前价格大于昨天收盘，则显示红色
  74.              span1.css("color","red");
  75.          } else {
  76.              span1.css("color","green");
  77.          }
  78.          updatediv();
  79.      })
  80.  }
  81.  
  82.  //更新弹出框中得内容
  83.  function updatediv() {
  84.      var stockobj = obj[sid];
  85.      for (var proname in stockobj) {
  86.          if (proname != "name") {
  87.              //找到对应的弹出框中的div节点，然后找到span字节点，将数据填充
  88.              $("#" + proname).children("span").html(stockobj[proname]);
  89.          }
  90.      }
  91.  }

web.xml

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  3.          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  4.          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
  5.         version="3.1">
  6.  
  7.     <servlet>
  8.         <servlet-name>GetStockInfo</servlet-name>
  9.         <servlet-class>GetStocksInfo</servlet-class>
  10.         <load-on-startup>1</load-on-startup>
  11.     </servlet>
  12.  
  13.     <servlet-mapping>
  14.         <servlet-name>GetStockInfo</servlet-name>
  15.         <url-pattern>/GetStockInfo</url-pattern>
  16.     </servlet-mapping>
  17. </web-app>

JSON格式相当于是键值对对象

使用JSON数据格式模拟股票实时信息的更多相关文章

  1. AJAX优势、跨域方案及JSON数据格式和浏览器中JSON对象

    ajax 不重新加载整个网页的情况下,更新部分网页的技术 注意:ajax只有在服务器上运行才能生效,我在本地一般用phpstudy 优点: 1.优化用户体验 2.承担了一部分本该服务器端的工作,减轻了 ...

  2. XML和JSON数据格式对比

    概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...

  3. MyEclipse开发JAX-RS架构WebServices收发JSON数据格式

    最近因项目需求,开始学习WebServices. 1.开发环境: MyEclipse2013 2.客户端发送的JSON数据格式为 {persons:[{"name":"a ...

  4. Android+struts2+json方式模拟手机登录功能

    涉及到的知识点: 1.Struts2框架的搭建(包括Struts2的jSON插件) 2.Android前台访问Web采用HttpClient方式. 3.Android采用JSON的解析. 服务端主要包 ...

  5. 利用JSON Schema校验JSON数据格式

    最近笔者在工作中需要监控一批http接口,并对返回的JSON数据进行校验.正好之前在某前端大神的分享中得知这个神器的存在,调研一番之后应用在该项目中,并取得了不错的效果,特地在此分享给各位读者. 什么 ...

  6. json数据格式的简单案例

    json数据是一种文本字符串,它是javascript的原生数据格式,在数据需要多次重复使用时,json数据是ajax请求的首先.(注:ajax返回的数据格式支持三种分别为:文本格式,json.和xm ...

  7. Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)

    Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...

  8. VS快速生成JSON数据格式对应的实体

          有固定好的Json数据格式,你还在手动敲对应的实体吗?有点low了!步入正题,这是一个json字符串,先去验证JSON数据格式(http://www.bejson.com/)如下: { & ...

  9. jQuery EasyUI：根据数据库内容生成适合于easyui-tree的JSON数据格式

    1,jQuery EasyUI中easyui-tree特定的JSON数据格式 [ {"id":1,"text":"某公司","ch ...

随机推荐

  1. Sonarqube中文插件-Linux[20180105]

    前言     上次安装了Sonarqube英文版使用起来不方便,这次为Sonarqube安装中文插件. 前期准备:     软件下载: https://github.com/SonarQubeComm ...

  2. Sonar安装-Linux[20171227]

    前言     一款不错的代码质量管理工具Sonar 前期准备     官方参考文档 https://docs.sonarqube.org/display/SONAR/Documentation     ...

  3. Centos防火墙的配置

    Selinux的三种模式:enforcing,passive,disable 临时更改模式:setengorce 1|0        1:enforcing,   0:passive [root@C ...

  4. 【ISIS（中间系统到中间系统）路由链路状态信息协议初识】

    ISIS单区域的基本配置 一:根据项目需求,考虑到组网的规模和条件,部署ISIS单区域的拓扑图如下: 二:配置 1:首先对RTA进行配置,在系统视图创建ISIS进程:进入ISIS配置视图,指定IS的级 ...

  5. JS高级. 02 面向对象、创建对象、构造函数、自定义构造函数、原型

    面向对象的三大特性: 封装 a)  把一些属性和方法装到一个对象里 2.  继承 a)  js中的继承是指:   一个对象没有一些方法和属性,而另一个对象有 把另一个个对象的属性和方法,拿过来自己用, ...

  6. Mysql基础2-数据定义语言DDL

    主要: 数据库操作语句 数据表操作语句 视图定义语句 数据库表设计原则 DDL: Data Definition Language 数据定义语言 数据库操作语句 创建库 创建数据库: create d ...

  7. Hadoop(21)-数据清洗(ELT)简单版

    有一个诸如这样的log日志 去除长度不合法,并且状态码不正确的记录 LogBean package com.nty.elt; /** * author nty * date time 2018-12- ...

  8. scala成长之路（3）隐式转换

    不废话,先上例子:定义一个参数类型为String的函数: scala> def sayHello(name:String) = println("hello " + name ...

  9. Leecode刷题之旅-C语言/python-26.移除元素

    /* * @lc app=leetcode.cn id=27 lang=c * * [27] 移除元素 * * https://leetcode-cn.com/problems/remove-elem ...

  10. 从0开始 java 网站开发（jsp）【1】

    前提:安装java 并配置环境变量 java下载地址: http://www.java.com/zh_CN/ 环境变量配置 本地PC路径: 电脑--属性--高级--环境变量 在系统变量中: 新建 名: ...