Jquery和ajax开发案例之---动态股票信息_纯js股票分时图项目-优快云博客

本文链接：https://blog.youkuaiyun.com/zl594389970/article/details/24120133

本文通过一个实例展示了如何运用Jquery和Ajax技术动态获取并更新股票信息。主要内容包括HTML页面布局，Jquerystock.js中Ajax请求的实现，以及Struts配置文件struts.xml的设置，最终实现股票信息的实时刷新效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例(浮动窗口、动态股票信息、弹出菜单、可编辑的表格、自动补全输入框)下载地址：
http://download.youkuaiyun.com/detail/zl594389970/7218687

效果图：

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>JQuery实例：动态股票信息</title>
		<script type="text/javascript"  src="js/jquery-1.3.1.js"></script> 
		<script type="text/javascript"  src="js/jquerystock.js"> </script>
		
	</head>
	<body>
		<div id="0001"> <a href="#">洋河酒厂</a><span></span></div>
		<div id="3001"> <a href="#">浦发银行</a><span></span></div>
	</body>
	<div id="stock">
		<div id="yes">昨天：<span></span></div>
		<div id="tod">今天：<span></span></div>
		<div id="now">当前：<span></span></div>
	</div>
</html>

jquerystock.js代码：

//在页面加载时，就获取数据
var obj;//全局变量，用于保存返回的json对象
var code;
$(document).ready(function() {
	//获取a标签
	var as = $("a");
	//设置div的样式
	var stockNode = $("#stock").css("border"," 2px solid #FF0000")
	.width("150px").css("position","absolute").css("z-index","99")
	.css("background","white");
	//隐藏
	stockNode.hide();
	//注册鼠标移动上上面事件
	as.mouseover(function(event) {
		stockNode.show();
		var aNode = $(this);
		var divNode =aNode.parent();
		//获取div的id属性值
		code = divNode.attr("id");
		//更新数据
		setInterval(updata, 1000);
		//需要控制弹出框的位置
		//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+15+"px").css("top",myEvent.clientY+5+"px");
	});
	//注册鼠标离开时事件
	as.mouseout(function() {
		stockNode.hide();
	});
	// 获取数据
	getdata();
	// 1秒刷新一次
	setInterval(getdata, 1000);
	
});
//显示数据
function getdata() {
	$.get("getstock", null, function(data) {
		//obj = eval("(" + data + ")");//当get函数的第三个参数没设置时用该方法
		//当get方法第三个参数为json时则data就会被解析为json数据
		obj = data;
		// 获取json数据并解析
		// 获取两支股票的当前指数信息
		var yh = obj["0001"];
		var pf = obj["3001"];
		/*
		 * 遍历一个js的对象 for( var stockid in obj) { var stock = obj[stockid]; }
		 */
		// 获取div中span并显示数据
		var yhs = $("#0001").children("span");

		var pfs = $("#3001").children("span");

		yhs.html(yh.now);
		pfs.html(pf.now);
		//高于昨天是红的，低于是绿的
		if (yh.now > yh.yes) {
			yhs.css("color","red");
		}else
		{
			yhs.css("color","green");
		}
		
		if (pf.now > pf.yes) {
			pfs.css("color","red");
		}else
		{
			pfs.css("color","green");
		}

	},"json");
}
//更新提示框中的数据
function updata() {

	//找到对应股票对象
	var stock = obj[code];
	for(var proname in stock )
	{
		if( proname != "name" && proname != "id")
		{
			//设置spn中对应的值
			var span = $("#"+proname).children("span").html(stock[proname]);
			if( proname == "now")
			{
				if (stock.now > stock.yes) {
					span.css("color","red");
				}else
				{
					span.css("color","green");
				}
			}
		}
		
	}
	
}

股票类Stock:

package com.liang.bean;

public class Stock {
	private String id;
	//股票名
	private String name;
	//当前
	private double now;
	//今天
	private double tod;
	//昨天
	private double yes;
	
	public Stock(String id, String name, double tod, double yes) {
		super();
		this.id = id;
		this.name = name;
		this.tod = tod;
		this.yes = yes;
		this.now=tod;
	}
	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 getTod() {
		return tod;
	}
	public void setTod(double tod) {
		this.tod = tod;
	}
	public double getYes() {
		return yes;
	}
	public void setYes(double yes) {
		this.yes = yes;
	}
}

StockAction控制类：

package com.liang.action;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.ejb.EnterpriseBean;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;
import net.sf.json.JsonConfig;

import org.apache.struts2.ServletActionContext;

import com.liang.bean.Stock;
import com.opensymphony.xwork2.ActionSupport;
	/**
	 * 产生股票数据
	 */
public class StockAction extends ActionSupport{
	//股票栈
	private static  Map<String,Stock> stocks = new HashMap<String, Stock>();
	static{
		//初始化两支股票
		Stock yh = new Stock("0001", "洋河酒厂", 2009.45, 2012.44);
		Stock pf = new Stock("3001", "浦发银行", 300.12,335.56);
		stocks.put("0001", yh);
		stocks.put("3001", pf);
	}
	public String execute()
	{	
		try {
			Stock yh = stocks.get("0001");
			Stock pf = stocks.get("3001");
			//每次请求时产生股票当前的动态数据
			double syh = Math.random()*10;
			double spf = Math.random()*0.5;
			
			boolean flagey = (int)(syh*10)%2==0;
			boolean flagep = (int)(spf*10)%2==0;
			double temp ;
			//让当前股票的值增或者减
			if( flagey)
			{
				temp=yh.getNow()+syh;
			}else{

				temp=yh.getNow()-syh;
			}
			temp = (int)(temp*100)/100.0;
			yh.setNow(temp);
			if( flagep)
			{
				temp=pf.getNow()+spf;
			}else{
				temp=pf.getNow()-spf;
			}
			temp = (int)(temp*100)/100.0;
			pf.setNow(temp);
			//构造json数据
			JSONObject object = new JSONObject();
			for( String key : stocks.keySet())
			{
				JSONObject jsonStock = new JSONObject();
				object.put(key, JSONObject.fromObject(stocks.get(key)));
			}
			ServletActionContext.getRequest().setAttribute("stockjson", object.toString());
		} catch (Exception e) {
			e.printStackTrace();
		}
		//转发到stockjson.jsp
		return SUCCESS;
	}	
}

stockjson.jsp代码：

 <%--ajax的自动补全实例
与传统应用的视图层不同，这个jsp返回的是json数据，
--%>
<%@ page contentType="text/xml; charset=UTF-8" language="java" %>
${stockjson}

struts.xml代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
    "http://struts.apache.org/dtds/struts-2.3.dtd">

<struts>
		<package name="test" extends="struts-default" >
			<action name="getstock" class="com.liang.action.StockAction">
			 <result >stockjson.jsp</result>
			</action>
			<action name="autoComplete" class="com.liang.action.AutoCompleteAction">
			 <result >wordxml.jsp</result>
			</action>
		</package>
</struts>