使用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 ...
随机推荐
- IOException parsing XML document from ServletContext resource [/WEB-INF/applicationContext.xml]; nested exception is java.io.FileNotFoundException: Could not open ServletContext resource [/WEB-INF/app
web.xml初始化spring容器出错 org.springframework.beans.factory.BeanDefinitionStoreException: IOException par ...
- 《Linux 性能优化实战—倪朋飞 》学习笔记 CPU 篇
平均负载 指单位时间内,系统处于可运行状态和不可中断状态的平均进程数,即平均活跃进程数 可运行状态:正在使用CPU或者正在等待CPU 的进程,也就是我们常用 ps 命令看到的,处于 R 状态 (Run ...
- NC使用技巧
1. NC 1.1概述 1.1.1 优点: 1)网络工具中的瑞士军刀 2)侦听模式/传输模式. 3)可代替telnet获取banner信息. 4)传输文件/目录. 5)传输文本信息. 6)加密传输文件 ...
- TCP回话劫持原理和利用
由于 TCP 协议并没有对 TCP 的传输包进行身份验证,所以在我们知道一个 TCP 连接中的 seq 和 ack 的信息后就可以很容易的伪造传输包,假装任意一方与另一方进行通信,我们将这一过程称为 ...
- LOOP AT SCREEN
用法 主に.画面の属性を変更させるために使用する. 照会モードでは入力不可とするが入力可能モードでは入力可能とする.ラジオボタンAが選択された場合はラジオボタンBに関連する項目は非表示とするなど. ...
- mysql 导入CSV数据 [转]
转自: http://blog.chinaunix.net/uid-23284114-id-3196638.html MYSQL LOAD DATA INFILE命令可以把csv平面文件中的数据导 ...
- 《Cracking the Coding Interview》读书笔记
<Cracking the Coding Interview>是适合硅谷技术面试的一本面试指南,因为题目分类清晰,风格比较靠谱,所以广受推崇. 以下是我的读书笔记,基本都是每章的课后习题解 ...
- jenkins手动安装插件
插件下载地址: 搜索:https://plugins.jenkins.io/ 列表:https://updates.jenkins-ci.org/download/plugins/ 打开jenkins ...
- webpack实践总结
一.Loader写法及执行顺序 从webpack2起,loader的格式如下: module: { rules: [ {test: /\.css$/, use: ['style-loader','cs ...
- js学习日记-new Object和Object.create到底干了啥
function Car () { this.color = "red"; } Car.prototype.sayHi=function(){ console.log('你好') ...