使用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 ...
随机推荐
- SAP销售订单屏幕字段控制隐藏，必输等
1.T-CODE:shd0 创建变式 , 点击确认按钮后,SAP进入下一个屏幕,然后重复上面的操作,直到所有屏幕已完成设置. 如果后续屏幕不需要设置,可点击“退出并保存”按钮.保存后,进入下图所示页 ...
- 免安装版Tomcat9中间件的安装
[环境准备] OS版本:Windows10.64位 Tomcat版本:apache_tomcat9.0.7.zip免安装版 [彻底卸载已安装的Tomcat中间件] 01:由于是免安装版本,因此直接删除 ...
- CacheCloud+Redis Cluster 3部署
CacheCloud环境需求 Java 7 Maven 3 MySQL Redis 3 具体用法可参考:https://cachecloud.github.io 1.下载CacheCloud 官网ht ...
- （转）Maven POM中的各种scope的行为总结
原地址:https://blog.csdn.net/cnweike/article/details/52221410 compile:默认的scope.任何定义在compile scope下的依赖将会 ...
- linux后台程序开发常用工具
linux开发工具: 1.编辑工具:1)sourceInsight2)Notepad++3)UltraEdit4)Altova XMLSpy 2.linux服务器访问工具:1)FileZilla2)X ...
- BGP映射和联盟
BGP映射和联盟 一:请看下面四张有关于BGP映射和联盟的拓扑图 BGP联盟 BGP映射实例 BGP单映射 BGP多映射 二:以图一为列,进行BGP联盟的配置测试: 首先进行理论分析,在拓扑图中共用两 ...
- anaconda 安装opencv win10
直接在命令窗口里面运行:pip install opencv-python即可.
- FZU：1759-Problem 1759 Super A^B mod C （欧拉降幂）
题目链接:http://acm.fzu.edu.cn/problem.php?pid=1759 欧拉降幂是用来干啥的?例如一个问题AB mod c,当B特别大的时候int或者longlong装不下的时 ...
- 【Android开发】 HttpURLConnection.getOutputStream() IO异常
HttpURLConnection.getOutputStream() IO异常百度下,没找到想要的答案.网上的解决方案几乎都是从权限考虑的~最后找到个国外网站上找到答案~ http://stack ...
- CSS3新特性回顾
CSS3 介绍 开始实例 新特征简介 强大的CSS选择器 抛弃图片的视觉效果 盒模型变化(多列布局和弹性盒模型) 阴影效果 Web字体和web Font 图标 CSS33过渡与动画交互效果 媒体查询 ...