jquery实时数据更新

最近用jquery写了一个客户端实时刷新的小例子,代码如下
客户端html代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>实时显示数据</title>
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/player.js"></script>
</head>
<body>
<div id="0001"><a href="#">许飞:</a><span></span></div>
<div id="0002"><a href="#">孙燕姿:</a><span></span></div>

<div id="player">
<div id="yesterday">昨天:<span></span></div>
<div id="now">现在:<span></span></div>
</div>
</body>
</html>


js代码


var obj;
var id;
$(document).ready(function() {
var playerdiv = $("#player").css("border","1px solid black").width("100px").css("position","absolute").css("z-index",100);
playerdiv.hide();
var as = $("a");
as.mouseover(function(event) {
var aNode = $(this);
var parentNode = aNode.parent();

id = parentNode.attr("id");
var myEvent = event || window.event;
playerdiv.css("left",myEvent.clientX + 10 + "px").css("top",myEvent.clientY + 10 + "px");
updata();

playerdiv.show();

});
as.mouseout(function() {
playerdiv.hide();
});
getInfo();
setInterval(getInfo, 1000); //设置定时器函数,每个1000毫秒执行一次
});

function getInfo() {
$.get("GetPlayerInfo", null, function(data) {
//obj = eval(data); //如果指明返回的类型为json格式就不必用eval方法转化
obj = data;
var player1 = obj["0001"];
var player2 = obj["0002"];

var span1 = $("#0001").children("span");

span1.html(player1.now);

var span2 = $("#0002").children("span");
span2.html(player2.now);

updata();
},"json");

}

function updata() {
var player = obj[id];
for (var property in player) {
if (property != "name") {
$("#"+property).children("span").html(player[property]);
}
}
}


服务器端代码,我用的是Servlet

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: Administrator
* Date: 2011-4-12
* Time: 10:07:49
* To change this template use File | Settings | File Templates.
*/
public class GetPlayerInfo extends HttpServlet {
private HashMap<String, Player> players = null;

public void init(ServletConfig servletConfig) throws ServletException {
players = new HashMap<String, Player>();
Player player1 = new Player("0001", "许飞", 1005.0);
Player player2 = new Player("0002", "孙燕姿", 1100.0);
players.put(player1.getId(), player1);
players.put(player2.getId(), player2);

}

protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}

protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
httpServletResponse.setContentType("text/html;charset=UTF-8");
httpServletResponse.setHeader("Cache-Control","no-cache");

Player player1 = players.get("0001");
Player player2 = players.get("0002");
double temp = Math.random() * 10;
temp = (int)(temp + player1.getNow())*100/100;
player1.setNow(temp);

temp = Math.random() * 10 + 5;
temp = (int)(temp + player2.getNow())*100/100;
player2.setNow(temp);

StringBuilder builder = new StringBuilder(); //返回的是json数据的格式
builder.append("({\"").append(player1.getId()).append("\":")
.append("{name:\"").append(player1.getName())
.append("\",yesterday:").append(player1.getYesterday())
.append(",now:").append(player1.getNow())
.append("},")
.append("\"").append(player2.getId()).append("\":")
.append("{name:\"").append(player2.getName())
.append("\",yesterday:").append(player2.getYesterday())
.append(",now:").append(player2.getNow())
.append("}})");
PrintWriter out = httpServletResponse.getWriter();
System.out.println(builder);
out.print(builder);
}
}


bean的代码如下

/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2011-4-12
* Time: 10:05:55
* To change this template use File | Settings | File Templates.
*/
public class Player {
private String id;
private String name;
private double yesterday;
private double now;

public Player(String id, String name, double yesterday) {
this.id = id;
this.name = name;
this.yesterday = yesterday;
this.now = yesterday;
}

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 double getYesterday() {
return yesterday;
}

public void setYesterday(double yesterday) {
this.yesterday = yesterday;
}

public double getNow() {
return now;
}

public void setNow(double now) {
this.now = now;
}
}
【数据集实例】CMIP6气候模式数据下载-以河东地区为例 以河东地区为例,介绍CMIP6数据下载及处理 阅读详情

相关推荐

LD14激光雷达与STM32F103C8T6(标准库)获取雷达360度数据(1)

LD14激光雷达与STM32F103C8T6(标准库)获取雷达360度数据(1)

qq_54206194的博客 3897

jquery使用ajax实现实时刷新

对于前端渲染页面拿数据,无非就是ajax、socket,其他的暂时没有用过,但项目还是使用ajax比较多。 简单的基于ajax短轮询的请求: function reqs() { $.ajax({ type: 'get', url: 'demo.php', dataType: 'json', success: functi...

wchqzhy99的专栏 698

Qt6安装保姆级教程:从国内镜像下载到配置避坑指南(附清华/中科大源)

本文提供详细的Qt6安装与配置指南,重点介绍如何利用清华大学、中国科学技术大学等国内镜像源解决下载速度慢的问题。内容涵盖在线安装器获取、组件选择策略、环境变量配置以及常见编译与部署问题的排查方法,旨在帮助国内开发者高效、顺畅地完成Qt6开发环境搭建。

weixin_29281915的博客 633

html jquery post后更新整个页面

在点击按钮提交数据后,发现页面没有更新,只能调用回调函数进行了整个页面html代码的更新来刷新页面:如下 $(document).ready(function(){ $("#gobtn").click(function(){ var ip=$("#ip").val(); $.post("/process/",{'hostip':ip}, function(data,sta

云中不知人的专栏 3707

iTunes登录协议逆向与自动化实现

本文详细解析了iTunes登录协议的逆向工程与自动化实现方法,涵盖请求体构造、签名生成和会话管理等关键技术。通过XML结构解析、X-Apple-ActionSignature生成原理及完整登录流程实现,帮助开发者高效完成iTunes自动化登录,提升工作效率。

weixin_26938645的博客 939

DSSAT模型建模教程

随着数字农业和智慧农业的发展,基于过程的作物生长模型(Process-based Crop Growth Simulation Model)在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农业碳中和、农田固碳减排等领域扮演着越来越重要的作用。现有版本V4.7能模拟27种主要农作物的生长发育和产量形成过程,被广泛应用于精细农业、水肥管理、气候变化、粮食安全、土壤碳周转、环境影响、农业可持续性、农业生态等诸多与农业生产和科研有关的领域。如果你是个模型入门者,这次将让你体验一键模拟的乐趣。

weixin_55561616的博客 1413

jquery刷新页面(局部及全页面刷新)

2019独角兽企业重金招聘Python工程师标准>>> ...

weixin_34128411的博客 774

COMSOL实现裂缝性储层油水两相流模拟的关键技术

多孔介质中的流体流动模拟是油气藏开发的核心技术,其基本原理基于达西定律和质量守恒方程。在裂缝性储层中,离散裂缝网络与基质系统的耦合流动带来了特殊的数值挑战。通过COMSOL Multiphysics平台实现的多物理场耦合技术,可以精确模拟油水两相在复杂裂缝系统中的渗流行为。该技术采用Level Set方法表征裂缝几何形态,结合自适应网格生成技术解决狭窄裂缝的网格剖分难题,并创新性地引入Bang-Larsen毛管压力滞后模型,显著提高了采收率预测精度。这些方法在致密油藏开发、水驱优化等工程实践中具有重要应用价

weixin_34005090的博客 229

JQ刷新页面(ajax局部)和全页面刷新方法

jquery刷新页面局部刷新:这个方法就多了去了,常见的有以下几种;$.get方法,$.post方法,$.getJson方法,$.ajax方法如下前两种使用方法基本上一样$.get(”Default.php”, {id:”1″, page: “2″ },function(data){//这里是回调方法。返回data数据。这里想怎么处理就怎么处理了。});$.getScript...

weixin_34279061的博客 3154

【人工智能的数学基础】最优传输(Optimal Transport)问题与Wasserstein距离

代表两堆石子,则问题等价于如何移动一堆石子,通过最小的累积移动距离把它堆成另外一堆石子。的不同位置分配的值。为离散型概率分布,则该优化问题可以表示为矩阵形式。表示寻找总运输成本最小的方案。放大后的上确界不会小于原来的上确界,因此不妨取。具有相同的概率分布。是概率分布,因此积分可以写作采样形式。描述了一种可行的运输方案,表示应该从位置。则最优传输问题的目标函数可以用列向量。对于一个线性规划问题,总可以写出其。的所有可能联合分布的集合,下确界。其中矩阵的每一行代表概率分布。表示寻找使得目标函数最大的。

AI天才研究院 6328

chembl_webresource_client 包数据接口下载chembl数据库;ZINC数据库下载、simles获取

点击进去https://zinc.docking.org/subclasses/kinase/predictions/,然后下载sdf模式,这里可以转化simles格式,如果下载csv里面没有包含simles。参考:https://github.com/chembl/chembl_webresource_client/blob/master/demo_wrc.ipynb。参考:https://zinc.docking.org/这是网页搜索查看,16条数据。这个数据这下载特别慢。

weixin_42357472的博客 3046

Jquery实现数据实时更新 jQuery Timers

精选名称:JQuery Timers 授权模式:WTFPL 官方网页:http://jquery.offput.ca/every/ 官方展示:http://jquery.offput.ca/every/ 底端 有时候必需定时做一个动作,像是每n秒透过ajax发送讯息伺服器,取得更新资讯。 一般的方式是使用Javascript的原生计时器函式 clearInterval...

qiuyujia 617

HBase学习二:RegionServer详解

RegionServer是HBase系统中最核心的组件,主要负责用户数据写入、读取等基础操作。RegionServer组件实际上是一个综合体系,包含多个各司其职的核心模块:HLog、MemStore、HFile以及BlockCache。一个RegionServer由一个(或多个)HLog、一个BlockCache以及多个Region组成。其中,HLog用来保证数据写入的可靠性;BlockCache可以将数据块缓存在内存中以提升数据读取性能;

qwerty1372431588的博客 747

Jquery无刷新实时更新表格数据

Jquery无刷新实时更新表格数据 本例与《jquery表格可编辑修改表格里面的值,点击td变input无刷新更新表格》差不多的功能,但是本例的更新是一次更新一行数据,具体的请看更新文件table_edit_ajax.php。 数据库当然也是相同的, 演示 PHP Code <tablewidth="600"align="center">...

weixin_30526593的博客 187

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

实时更新数据的jQuery图表插件DEMO演示

<!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> <m...

vincent_duan的专栏 234

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

实时更新数据的jQuery图表插件

首先看效果:

MR_yuan24的专栏 789

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

实现数据库实时更新 jQuery Timers

精选名称:JQuery Timers 授权模式:WTFPL 官方网页:http://jquery.offput.ca/every/ 官方展示:http://jquery.offput.ca/every/ 底端 有时候必需定时做一个动作,像是每n秒透过ajax发送讯息伺服器,取得更新资讯。 一般的方式是使用Javascript的原生计时器函式 clearInterval...

Just Code 288

php 表格刷新,Jquery无刷新实时更新表格数据

html代码:FirstLast$sql=mysql_query("select * from add_delete_record");$i=1;while($row=mysql_fetch_array($sql)){$id=$row[‘id‘];$content=$row[‘content‘];$text=$row[‘text‘];if($i%2){?>$i++;}?>$(docum...

weixin_28764585的博客 239

mysql数据实时更新数据_实时更新MySQL数据

I have the following code and it works great, I just want to convert it to live so it updates every 10 seconds or so without a page refresh, I'm guessing I'll need to use AJAX or Jquery but I lack the...

weixin_28747829的博客 917

ASP实时刷新显示mysql数据_php+jQuery ajax实现的实时刷新显示数据功能示例

本文实例讲述了php+jQuery ajax实现的实时刷新显示数据功能。分享给大家供大家参考,具体如下:创建数据表:demo---- 表的结构 `demo`--CREATE TABLE IF NOT EXISTS `demo` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(20) COLLATE utf8_bin NOT NULL,PRI...

weixin_36309562的博客 209

Echarts实时更新数据

先了解一下什么是AJAX AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。 有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。 AJAX工作原理 使用jQuery开发Ajax jQuery 的 $.ajax() 方法可以

linjiayina的博客 7870

用json + jQuery ajax实现页面实时数据刷新

现在我想做的这个实例,最终实现的效果是:以一个文件构造json格式数据,通过jQuery ajax请求将其解析,然后填充Web页面内容,并结合实时数据显示;     1. 构造json格式数据并不是一件容易的事情,对于不是熟手的人来说,这里我需要用到一些Asp.net方面的知识

9240

jquery ajax提交动态的数组吗,如何使用ajax和jquery动态更新数组表?

我有两个文件的PHP(gettable.php和index.php)索引文件显示gettable.php获得的结果每一个seond,我想在索引中动态更新我的表的内容(只有新的或更改的值必须被改变)使用ajax,我是阿贾克斯的初学者。如何使用ajax和jquery动态更新数组表?帮我请 谢谢gettable.php////// I load data from the server(xml file...

weixin_36332616的博客 274

jQuery实时刷新显示数据

创建数据表:demo-- -- 表的结构 `demo` --CREATE TABLE IF NOT EXISTS `demo` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(20) COLLATE utf8_bin NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT C

koastal的博客 1万+
上一篇: jquery可编辑的表格
下一篇: 反向ajax小例子
lk231_java
博客等级 码龄15年 0粉丝 69原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值