- 浏览: 25173 次
- 性别:
- 来自: 北京
最新评论
在上一个项目的基础上学习该实例:
步骤1.新建bean
package bean;
/**
* 用于保存股票的基本信息
*/
public class Stock {
//昨天的收盘价
private double yesterday;
//今天的开盘价
private double today;
//当前价格
private double now;
//股票名称
private String name;
//股票代码
private String id;
public Stock(){}
public Stock(double yesterday, double today, String name, String id) {
super();
this.yesterday = yesterday;
this.today = today;
this.name = name;
this.id = id;
this.now = today;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public double getNow() {
return now;
}
public void setNow(double now) {
this.now = now;
}
public double getToday() {
return today;
}
public void setToday(double today) {
this.today = today;
}
public double getYesterday() {
return yesterday;
}
public void setYesterday(double yesterday) {
this.yesterday = yesterday;
}
public String toString(){
return this.name + ":" + this.now;
}
}
步骤2.新建servlet
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import bean.Stock;
/**
* 返回股票当前信息的servlet
*/
public class GetStocksInfo extends HttpServlet {
private static final long serialVersionUID = -8644886633753734374L;
//保存股票信息的map
private HashMap<String, Stock> stocks;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//返回两只股票的价格信息
//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);
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.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("}],");
*/
//采用对象的方式回传两个股票对象
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.print(builder);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
public void init() 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);
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<servlet>
<servlet-name>GetStocksInfo</servlet-name>
<servlet-class>servlet.GetStocksInfo</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>GetStocksInfo</servlet-name>
<url-pattern>/GetStocksInfo</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>
步骤3.新建html---JqueryStock.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jquery实例:动态股票价格</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="jslib/jquery-1.4.2.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>
步骤4.新建js------jquerystock.js
//期望进入页面后可以开始从服务器端获取数据,然后显示股票价格
var obj;
var sid;
$(document).ready(function () {
//页面载入时隐藏弹出窗口
var stockNode = $("#stock").css("border", "1px solid black").css("width", "180px").css("position","absolute")
.css("background-color","blue").css("color","yellow").css("z-index","99");
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.向服务器发起请求,获取数据
var url = "GetStocksInfo";
//解决IE缓存问题
url = convertURL(url);
$.get(url, null, function (data) {
//2.接收并解析数据
obj = eval(data);
//2.1获取两只股票的当前指数信息
var szzs = 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", "green");
} else {
span3.css("color", "red");
}
var span1 = $("#000001").children("span");
span1.html(pfyh.now);
if (pfyh.now > pfyh.yes) {
span1.css("color", "green");
} else {
span1.css("color", "red");
}
updatediv();
});
}
//弹出框更新信息
function updatediv() {
var stockObj = obj[sid];
for (var proname in stockObj) {
if (proname != name) {
//找到对应的div节点并找到其子节点span,并将数据放进去
$("#" + proname).children("span").html(stockObj[proname]);
}
}
}
//时间戳函数
function convertURL(url) {
//获取时间戳
var timestamp = (new Date()).valueOf();
//将时间戳拼接在url路径上
if (url.indexOf("?") >= 0) {
url = url + "&t=" + timestamp;
alert(url);
} else {
url = url + "?t=" + timestamp;
}
return url;
}
然后访问http://localhost:8080/JqueryTrain/JqueryStock.html即可!!!
在线Jquery 超炫API http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html
- JqueryTrain.rar (36.6 KB)
- 下载次数: 7
- jQueryAPI-100214.zip (217.7 KB)
- 下载次数: 3
发表评论
-
AJAX学习总结(九)---Jquery实例:仿googlesuggest自动补全功能
2010-08-07 01:26 1465步骤1.新建项目JqueryTrain 步骤2.导入J ... -
AJAX学习总结(七)---实现可编辑的表格
2010-08-03 13:23 1206该实例是在上一个工程 ... -
AJAX学习总结(六)---可收缩展开的级联菜单和局部刷新
2010-08-02 22:46 1421步骤1.新建项目JqueryTrain ... -
AJAX学习总结(五)---窗口的淡入淡出和css学习
2010-08-02 21:54 1042步骤1.新建项目JqueryTrain 步骤2. ... -
AJAX学习总结(四)---解决缓存问题
2010-08-02 14:40 821步骤1.新建项目ajaxtrain 步骤2.在WebR ... -
AJAX学习总结(三)--jQuery处理xml数据
2010-08-02 12:47 992步骤1.新建项目ajaxtrain 步骤2.在WebR ... -
AJAX学习总结(二)--XMLHttprequest实例
2010-08-01 18:13 1653步骤1.新建项目ajaxtrain 下面有基于XMLH ... -
AJAX学习总结(一)--基于jQuery第一个实例
2010-07-30 18:32 883步骤1.新建一个java项目:ajaxtrain 步骤 ...
相关推荐
NULL 博文链接:https://lc2586.iteye.com/blog/731375
NULL 博文链接:https://lc2586.iteye.com/blog/725751
这是一个利用了Ajax技术的一个Jquery实例,动态的生成级联的下拉列表框,在中关村zol中经常可以看到。如果遇到无法显示的情况,请自己阅读代码。
jQuery一些表单实例打包,Ajax表单判断代码,锋利的JQuery一书里的随书实例: Demo 1 : form插件的使用--ajaxForm(). Demo 2 : form插件的使用---ajaxSubmit(). Demo 3 : form插件的使用--formSerialize()组装...
Ajax-javascript-without-jquery.zip,提示和实例,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改...
这是一个学习jquery-ajax的实例,实例中应用到了bean -json的转化, 页面上应用到了jqury如何解析返回的json数据。
jQuery-Ajax实例应用 介绍jquery-ajax中几种主要方法的应用
jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading jquery ajax实例点击按钮触发Ajax loading
其中包含6款Ajax分页Demo,文字分页、图片分页都可以。具有一定特效、很炫。基本已经满足各种web分页开发了。
在VS环境下使用。C#代码。这是我总结的js和JQUERY使用ajax调用webservice和ashx(一般处理程序)的代码。还有使用AjaxPro第三方控件的使用的练习。
jQuery Ajax 实例 全解析; jQuery Ajax 实例 全解析;
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...
AJAX实例:根据邮编自动完成地址信息 AJAX实例:根据邮编自动完成地址信息
Vs2005C#下使用Jquery实现的Ajax简单实例
使用jQuery处理Ajax.mp4 ---5.定制化jQuery.mp4 二十、使用IEDA进行项目开发(选学) ---IDEA的使用.mp4 二十八、VUE.JS实战(选学) ---168.初识Vue.mp4 ---169.Vue.js指令.mp4 ---170.交互与实例的生命周期.mp4 ---...
Jquery.Pagination.js + Jquery.Ajax + ASP.NET----无刷新分页Pagination 1.5.1,是在原作者基础上修改的,因为Pagination 1.5.1与它的低版本有很大的区别,所以在此实例中增加了新版的使用方法
spring整个流程配置测试正常,前台JSP页面使用jQuery中的Ajax提交至后台的简单实例项目。导入到myeclipse中,部署在tomcat后直接运行即可。