index.html文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery之股票信息</title>
<link href="css/Stock.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/Stock.js" type="text/javascript"></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.js文件
//保存服务器端返回的股票对象
var obj;
var divId;
$(function(){
var stockNode=$("#stock");
stockNode.css("border","1px solid black").css("background-color","#eee").width("200px")
.css("position","absolute").css("z-index","50");
stockNode.hide();
var aNodes=$("a");
//鼠标进入股票名称时的操作
aNodes.mouseover(function(event){
var aNode=$(this);
var divNode=aNode.parent();
divId=divNode.attr("id");
updateInfo();
//控制弹出框的位置
//var offset=aNode.offset();
//stockNode.css("left",offset.left+"px").css("top",offset.top+aNode.height()+"px");
var myEvent=event || window.event;
stockNode.css("left",myEvent.clientX+10+"px").css("top",myEvent.clientY+10+"px");
//显示弹出框
stockNode.show();
});
//鼠标离开股票名称时的操作
aNodes.mouseout(function(){
stockNode.hide();
});
getInfo();
//每一秒钟和服务器交互一次，更新数据信息
setInterval(getInfo,1000);
});
//更新弹出框中的信息
function updateInfo()
{
var stockObj=obj[divId];
for(var proName in stockObj){
if(proName !="name" && proName!="id"){
$("#"+proName).children("span").html(stockObj[proName]);
}
}
}
function getInfo()
{
//向服务器发送请求
$.get("handle/stock.ashx?t=" + (new Date()).valueOf(),function(data){
//接收解析数据
obj=eval(data);
//获取两只股票的当前指数
var szzs=obj["300001"];//obj.300001
var pfyh=obj["000001"];
/*
遍历一个对象
for(var stockid in obj)
{
var stock=obj[stockid];
}
*/
//找到相应的div节点
var sz= $("#300001").children("span")
sz.html(szzs.now);
if(szzs.now>szzs.yes){
//当前价格大于昨天收盘，则为红色
sz.css("color","red");
}else{
sz.css("color","green");
}
var pf=$("#000001").children("span")
pf.html(pfyh.now);
if(pfyh.now>szzs.pfyh){
//当前价格大于昨天收盘，则为红色
pf.css("color","red");
}else{
pf.css("color","green");
}
updateInfo();
});
}
stock.ashx一般处理程序文件
<%@ WebHandler Language="C#" Class="stock" %>
using System;
using System.Web;
using System.Data;
using System.Collections;
using System.Collections.Generic;
using System.Text;
public class stock : IHttpHandler {
Hashtable ht = new Hashtable();
public void ProcessRequest (HttpContext context)
{
context.Response.ContentType = "text/plain";
init();
Random data=new Random();
double sz = data.NextDouble() * 20;
double pf = data.NextDouble() * 0.5;
//true涨，false跌
bool flagSz = ((int)(data.NextDouble() * 10)) % 2 == 0;
bool flagPf = ((int)(data.NextDouble() * 10)) % 2 == 0;
Stock szzs=(Stock)ht["300001"];
Stock pfyh=(Stock)ht["000001"];
double temp;
if (flagSz)
{
temp=szzs.Now + sz;
}
else
{
temp = szzs.Now - sz;
}
temp = Math.Round(temp, 2);
szzs.Now = temp;
if (flagPf)
{
temp = pfyh.Now + pf;
}
else
{
temp = pfyh.Now - pf;
}
temp = Math.Round(temp, 2);
pfyh.Now = temp;
//采用json的数据格式返回股票的信息
//1采用数组的方式返回两个股票信息
StringBuilder json = new StringBuilder();
//json.Append("[{name:\"").Append(szzs.Name).Append("\",id:\"").Append(szzs.Id).Append("\",yes:")
// .Append(szzs.Yesterday).Append(",tod:").Append(szzs.Today).Append(",now:")
// .Append(szzs.Now).Append("},{name:\"").Append(pfyh.Name).Append("\",id:\"")
// .Append(pfyh.Id).Append("\",yes:").Append(pfyh.Yesterday).Append(",tod:")
// .Append(pfyh.Today).Append(",now:").Append(pfyh.Now).Append("}]");
//1采用对象的方式返回两个股票信息
//以对象返回信息时，需要在最外面加上括号，否则页面解析会报错
json.Append("({")
.Append("\"")
.Append(szzs.Id).Append("\":{name:\"").Append(szzs.Name).Append("\",id:\"").Append(szzs.Id).Append("\",yes:")
.Append(szzs.Yesterday).Append(",tod:").Append(szzs.Today).Append(",now:").Append(szzs.Now)
.Append("},").Append("\"")
.Append(pfyh.Id).Append("\":{name:\"").Append(pfyh.Name).Append("\",id:\"").Append(pfyh.Id).Append("\",yes:")
.Append(pfyh.Yesterday).Append(",tod:").Append(pfyh.Today).Append(",now:").Append(pfyh.Now)
.Append("}})");
context.Response.Write(json);
}
private void init()
{
Stock szzs = new Stock(3000.0, 2999.0, "上证指数", "300001");
Stock pfyh = new Stock(23.22, 23.50, "浦发银行", "000001");
ht.Add(szzs.Id, szzs);
ht.Add(pfyh.Id, pfyh);
}
public bool IsReusable {
get {
return false;
}
}
}
Stock.cs股票实体类文件
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
/// <summary>
///股票实体类
/// </summary>
public class Stock
{
public Stock() { }
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;
}
private double yesterday;
public double Yesterday
{
get { return yesterday; }
set { yesterday = value; }
}
private double today;
public double Today
{
get { return today; }
set { today = value; }
}
private double now;
public double Now
{
get { return now; }
set { now = value; }
}
private string name;
public string Name
{
get { return name; }
set { name = value; }
}
private string id;
public string Id
{
get { return id; }
set { id = value; }
}
}
分享到：
相关推荐
ASP.NET+JQuery实现Ajax无刷新技术，程序比较简单，只有一个ajax.aspx是动态页面，其余全是静态页面。因此，本程序是您学习Ajax的好范例，其使用的JQuery插件，也是目前Ajax技术依托的最强大、最流行的JS类库。
在这个“asp.net+jquery+ajax所有调用例子”中，我们将深入探讨如何结合这些技术来实现高效的用户交互。 首先，ASP.NET AJAX提供了UpdatePanel组件，使得页面的部分区域可以异步更新，而无需整个页面的回发。通过在...
ASP.NET、jQuery 和 AJAX 的组合在 Web 应用开发中被广泛用于实现高效、无刷新的文件上传功能。本文将详细讲解如何利用这些技术来创建一个动态、用户体验友好的文件上传系统。 首先，ASP.NET 是 Microsoft 提供的一...
这种技术的核心在于利用Ajax异步通信和前端库（如jQuery）来处理用户交互，同时借助后端.NET框架处理文件上传逻辑。下面将详细介绍这个主题涉及的关键知识点。 1. **jQuery**：jQuery是一个轻量级的JavaScript库，...
jquery 分页（无刷新.net）源码 asp.net + jquery + sql server实现的无刷新分页源码下载
【标题】"asp.net+jquery+ajax无刷新最简单实用的例子"揭示了这个示例是关于如何使用ASP.NET、jQuery和Ajax技术实现网页无刷新更新的教程。在现代Web开发中，用户界面的实时更新和交互性至关重要，而Ajax...
在ASP.NET中，可以使用AJAX控件工具包或者jQuery的Ajax方法来实现这一功能。例如，在登录过程中，使用Ajax提交表单，服务器验证成功后，可以直接将欢迎消息插入到页面适当位置，而不是刷新整个页面。 在"TravelUser...
1.无刷新分页控件，以Northwind数据库为示例， 2.支持多种分页样式选择，也可以自己修改源代码自定义 3.可以单击任意字段排序 4.MsSql数据库封装访问类,可以修改代码应用于其他数据库 5.继承自IHttpHandler接口...
最新版本请点击： http://download.csdn.net/source/2926477 ...---------------------------------------------------------------------------- ...客户端使用 AJAX 心跳包拉数据，应用 JQuery 框架实现页面效果；
在"asp.net+jquery显示数据+分页"这个主题中，我们将深入探讨如何利用这两种技术来展示大量的数据并实现分页功能。 首先，ASP.NET是微软推出的一种服务器端脚本框架，用于构建动态Web应用。它提供了丰富的服务器...
该项目完全抛弃传统的Table布局，全部采用先进的Css+Div，画面绚丽，手写代码实现Ajax效果，没有.net Ajax框架的bug,结合动画提高了用户的体验，因该项目系委托开发，仅能公开部分代码，望见谅。使用时请先运行App_...
框架:html + css + jquery + ajax + asp.net + webform + ashx + WangEditor富文本框 + 文章二维码生成推广 + sql server + 存储过程 ALTER DATABASE SystemArticle SET SINGLE_USER WITH ROLLBACK IMMEDIATE; ALTER...
一款基于ASP.net+jQuery的无刷新多文件上传系统，轻松实现AJAX无刷新上传文件，没有使用任何第三方控件，全是用ASP.NET自写程序实现的上传，一次可以上传多个文件，用到了jQuery插件来控制程序的执行，可以适合添加...
Asp.net与jQuery结合实现的自动补全功能（autocomplete）是一种常见的前端交互设计，它能够极大地提高用户在输入框中的输入效率。此功能通常应用于搜索框、表单填充等场景，为用户提供动态提示，根据他们输入的部分...
【ASP.NET + jQuery + GridView 实现无刷新TreeGrid详解】 在Web开发中，TreeGrid是一种常见且实用的数据展示控件，它将树形结构和表格数据结合在一起，为用户提供了一种直观、高效的浏览和操作数据的方式。这个...
ASP.NET与jQuery及JSON是现代Web开发中的重要技术组合，它们在构建动态、交互式的Web应用程序方面发挥着关键作用。ASP.NET是微软推出的用于构建Web应用程序的框架，它提供了丰富的服务器端功能，而jQuery则是一个...
标题中的".net + jquery 多文件上传"是一个技术主题，涉及到使用Microsoft的.NET框架与jQuery库来实现网页上的多文件上传功能。这是一个常见的需求，在Web应用中，用户可能需要一次性上传多个文件，如图片、文档等。...
本教程将详细讲解如何利用Asp.Net后端技术和Jquery前端库来实现这样的功能。 首先，Asp.Net是微软开发的一种服务器端Web应用程序框架，用于构建动态、数据驱动的Web应用。它提供了丰富的控件和功能，方便开发者快速...
ASP.NET和jQuery是Web开发中的两个重要技术，用于构建交互性强、用户体验良好的应用程序。批量文件上传功能在现代网站中越来越常见，例如社交媒体平台、在线文档协作工具等，它允许用户一次性上传多个文件，极大地...