使用JSON数据格式模拟股票实时信息

JQueryStock.html

<!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格式相当于是键值对对象

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

AJAX优势、跨域方案及JSON数据格式和浏览器中JSON对象
ajax 不重新加载整个网页的情况下,更新部分网页的技术注意:ajax只有在服务器上运行才能生效,我在本地一般用phpstudy 优点: 1.优化用户体验 2.承担了一部分本该服务器端的工作,减轻了 ...
XML和JSON数据格式对比
概念 XML 扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语 ...
MyEclipse开发JAX-RS架构WebServices收发JSON数据格式
最近因项目需求,开始学习WebServices. 1.开发环境: MyEclipse2013 2.客户端发送的JSON数据格式为 {persons:[{"name":"a ...
Android+struts2+json方式模拟手机登录功能
涉及到的知识点: 1.Struts2框架的搭建(包括Struts2的jSON插件) 2.Android前台访问Web采用HttpClient方式. 3.Android采用JSON的解析. 服务端主要包 ...
利用JSON Schema校验JSON数据格式
最近笔者在工作中需要监控一批http接口,并对返回的JSON数据进行校验.正好之前在某前端大神的分享中得知这个神器的存在,调研一番之后应用在该项目中,并取得了不错的效果,特地在此分享给各位读者. 什么 ...
json数据格式的简单案例
json数据是一种文本字符串,它是javascript的原生数据格式,在数据需要多次重复使用时,json数据是ajax请求的首先.(注:ajax返回的数据格式支持三种分别为:文本格式,json.和xm ...
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现)
Django---CSRF的装饰器,CSRF的流程,JSON数据格式,ajax技术(基于JQ实现) 一丶CSRF相关的装饰器 from django.utils.decorators import m ...
VS快速生成JSON数据格式对应的实体
有固定好的Json数据格式,你还在手动敲对应的实体吗?有点low了!步入正题,这是一个json字符串,先去验证JSON数据格式(http://www.bejson.com/)如下: { & ...
jQuery EasyUI：根据数据库内容生成适合于easyui-tree的JSON数据格式
1,jQuery EasyUI中easyui-tree特定的JSON数据格式 [ {"id":1,"text":"某公司","ch ...

随机推荐

javascript--setTimeout定时器
setTimeout() 可以理解为定时炸弹 ---------------->隔一段事件执行,并且只会执行一次函数语法: setTimeout(参数1,参数2) 参数1:待执行 ...
Python学习手册之控制结构（一）
在上一篇文章中,我们对 Python 进行了简单介绍和介绍了 Python 的基本语法,现在我们继续介绍 Python 控制结构. 查看上一篇文章请点击:https://www.cnblogs.com ...
jmeter 插件安装
1.下载Plugins Manager插件打开下载插件地址:https://jmeter-plugins.org/ 2.将下载的plugins-manager.jar包复制到Jmeter安装目录,l ...
ruby 类库组成
一. 核心类库: 二.标准类库: 文本 base64.rb 处理Base64编码的模块 csv.rb CSV(Comma Separated Values)库 ruby 1.8 特性 ...
python基础之进程间通信、进程池、协程
进程间通信进程彼此之间互相隔离,要实现进程间通信(IPC),multiprocessing模块支持两种形式:队列和管道,这两种方式都是使用消息传递的. 进程队列queue 不同于线程queue,进程 ...
教你Zbrush 4R7怎样创建Z球
随着CG行业的迅猛发展,就业门槛大幅度提高,对于从业人员要求就是要“又快又好”,作为一个模型师,常会碰到一天或两天完成一个全身角色的考题,而且还需要角度摆出造型,以前做这个的话,可能比较难,现在有了Z ...
20145202马超 2016-2017-2 《Java程序设计》第一次实验
之前做的(http://www.cnblogs.com/tuolemi/p/5707098.html) 其余的断点的使用行断点条件断点参考(http://www.cnblogs.com/roc ...
一步一步学Linq to sql（二）：DataContext与实体
DataContext DataContext类型(数据上下文)是System.Data.Linq命名空间下的重要类型,用于把查询句法翻译成SQL语句,以及把数据从数据库返回给调用方和把实体的修改写入 ...
sqoop 的使用 -20160410
1 导入导出数据库 1)列出mysql数据库中的所有数据库命令 # sqoop list-databases --connect jdbc:mysql://localhost:3306/ - ...
虚拟接VMnet1 和VMnet8的区别
vmnet1是host-only,也就是说,选择用vmnet1的话就相当于VMware给你提供了一个虚拟交换机,仅将虚拟机和真实系统连上了,虚拟机可以与真实系统相互共享文件,但是虚拟机无法访问外部互联 ...

使用JSON数据格式模拟股票实时信息

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

随机推荐

热门专题