使用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 ...
随机推荐
- CentOS7 64位下 MySQL5.7的安装与配置（YUM）
趁着11.11的时候在阿里云上弄了一云服务ECS(作为自己的节日礼物 > _ <) ,系统为CentOS的,打算弄一个人博客之类的,这些天正在备案当中(不知得多久). 忙里偷闲,在中午休息 ...
- 【操作系统作业—lab1】linux shell脚本 遍历目标文件夹和所有文件 | 包括特殊字符文件名的处理
要求:写一个linux bash脚本来查看目标文件夹下所有的file和directory,并且打印出他们的绝对路径. 运行command:./myDir.sh input_path output_ ...
- haystack+Elasticsearch搜素引擎
搜索引擎原理 通过搜索引擎进行数据查询时,搜索引擎并不是直接在数据库中进行查询,而是搜索引擎会对数据库中的数据进行一遍预处理,单独建立起一份索引结构数据. 我们可以将索引结构数据想象成是字典书籍的索引 ...
- php GD 圆图 -处理成圆图片
<?php /** * 处理成圆图片,如果图片不是正方形就取最小边的圆半径,从左边开始剪切成圆形 * @param string $imgpath [description] * @return ...
- python基础之初识
一. 计算机是什么 基本组成: 主板+cpu+内存 cpu: 主频, 核数(16) 内存:大小(8G, 16G, 32G) 型号: DDR3, DDR4, DDR5, 主频(海盗船,玩家国度) 显卡: ...
- webug学习（1）
webug的题目,比较简单,拿来巩固一哈. 1. 一看就知道是注入漏洞了,啥也不说sqlmap直接开炮. 先-u 之后-u 网址 --current-db 获取当前网址的数据库 所以当前数据库就是 p ...
- ccpc 2018 final G - Pastoral Life in Stardew Valley
#include <iostream> #include<cstdio> #include<cstring> #include<queue> using ...
- ionic 打包apk Failure [INSTALL_FAILED_USER_RESTRICTED: Install canceled by user]
错误日志如下: Built the following apk(s): /Users/hongye0/Documents/project/haitoujiaApp/platforms/android/ ...
- SVN 使用时的小错误
在使用SVN的时候总是出现一些小问题,今天又出现了一个,诶,分享一下吧! Error:(个人文件夹名http://www.qdjhu.com/anli_xq/f_wancheng.php) is ...
- 「日常训练」 Mike and Frog (CFR305D2C)
题意与分析 (Codeforces 548C) 我开始以为是一条数学题,死活不知道怎么做,无奈看题解,才知这是一条暴力,思维江化了- - 题意大概是这样的: 两个东西的初始高度分别为h1,h2&quo ...