使用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 ...
随机推荐
- nigx配置location规则
以下是收集的,对于不是很熟的朋友,配置转发很有帮助 1.location匹配命令和优先级: 优先级: Directives with the = prefix that match the query ...
- Java语言利用Collections.sort对Map,List排序
1.main方法包含TreeMap排序1,TreeMap排序2,HashMap排序,List<Integer>排序,List<Bean>排序,List<Map>排序 ...
- C调用约定__cdecl、__stdcall、__fastcall、__pascal分析
参考原文地址:https://www.cnblogs.com/yenyuloong/p/9626658.html C/C++ 中不同的函数调用规则会生成不同的机器代码,产生不同的微观效果,接下来让我们 ...
- APSchedule的练习使用
1 简介 APScheduler的全称是Advanced Python Scheduler.它是一个轻量级的 Python 定时任务调度框架.APScheduler 支持三种调度任务:固定时间间隔,固 ...
- 双击 ajax修改单元格里的值
最终效果 列表页面表格里双击排序修改其值 按钮样式要引入bootstrap才可以用 本文件用的是laravel框架环境 larave路由里 Route::get('category/changesta ...
- Python Web开发中，WSGI协议的作用和实现原理详解
首先理解下面三个概念: WSGI:全称是Web Server Gateway Interface,WSGI不是服务器,python模块,框架,API或者任何软件,只是一种规范,描述web server ...
- is和==,编码补充
一,is和==的区别: 1, 通过一个ID()可以查看到一个变量表示的值在内存中的地址. s = 'alex' print(id(s)) # 4326667072 s = "alex& ...
- ESP32 学习笔记 - 环境搭建
打开终端 输入命令 sudo apt-get install gcc git wget make libncurses-dev flex bison gperf python python-seria ...
- 基于vue来开发一个仿饿了么的外卖商城（一）
一.准备工作 1.大前提:已安装好node. npm. vue. vue-cli.stylus(此项目使用stylus来编译) 2.开发软件:Google Chrome(建议安装插件vue-devto ...
- Windows 10 下如何彻底关闭 Hyper-V 服务(翻外篇)
原文:Windows 10 下如何彻底关闭 Hyper-V 服务(翻外篇) windows禁用/启用hyper-V,解决hyper-V与模拟器同时启用时造成冲突 我是这样解决的,以管理员身份运行命令提 ...