iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >如何使用ajax技术无刷新动态调用新浪股票实时数据
  • 942
分享到

如何使用ajax技术无刷新动态调用新浪股票实时数据

2024-04-02 19:04:59 942人浏览 薄情痞子
摘要

本篇内容介绍了“如何使用ajax技术无刷新动态调用新浪股票实时数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有

本篇内容介绍了“如何使用ajax技术无刷新动态调用新浪股票实时数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

<html> 
<head> 
<title>ajax test</title> 
<meta Http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="Jquery.js"></script> 
<script type="text/javascript">... 
function ajaxRequest()...{ 
$.ajax(...{ 
url: 'http://hq.sinajs.cn/list=sh000001,sh701939,sh700016,sh700528,sh700667,sh701390,sh701398,sh701857,sh700028', 
type: 'GET', 
dataType: 'html', 
timeout: 2000, 
success: function(response)...{ 
var stocks = response.split(';'); 
for(var i=0; i<stocks.length-1; i++)...{ 
var content = stocks[i]; 
var temp1 = content.split('=')[0]; 
var temp2 = content.split('=')[1]; 
var code = temp1.substr(temp1.length - 6, 6); 
var temp3 = temp2.replace('"', ''); 
var name = temp3.split(',')[0]; 
var tday_f = temp3.split(',')[1]; 
var yest_f = temp3.split(',')[2]; 
var curr_f = temp3.split(',')[3]; 
var temp_f = curr_f - yest_f; 
$('#a'+i).html(code); 
$('#b'+i).html(name); 
if(curr_f > yest_f) ...{ 
$('#c'+i).html("<font color='red'>" + curr_f + "</font>"); 
} else if(curr_f < yest_f) ...{ 
$('#c'+i).html("<font color='green'>" + curr_f + "</font>"); 
} else ...{ 
$('#c'+i).html(curr_f); 
} 
$('#d'+i).html(tday_f); 
$('#e'+i).html(yest_f); 
if(temp_f > 0) ...{ 
$('#f'+i).html("<font color='red'>" + temp_f.toFixed(2) + "</font>"); 
$('#g'+i).html("<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % "); 
} else if(temp_f < 0) ...{ 
$('#f'+i).html("<font color='green'>" + temp_f.toFixed(2) + "</font>"); 
$('#g'+i).html("<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % "); 
} else ...{ 
$('#f'+i).html(temp_f.toFixed(2)); 
$('#g'+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % "); 
} 
$('#h'+i).html(temp3.split(',')[4]); 
$('#i'+i).html(temp3.split(',')[5]); 
} 
} 
}); 
} 
function pageInit() ...{ 
window.setInterval("ajaxRequest()",3000); 
} 
</script> 
<style>... 
.tr_cls {...}{ 
height:30px; 
font-size:16px; 
font-family:"Times New Roman", Times, serif; 
background-color:#FFFFCC 
} 
</style> 
</head> 
<body onLoad="pageInit();"> 
<fORM> 
<table width="800" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"> 
<tr bGColor="#3399FF" height="30px"> 
<th scope="col">股票代号</th> 
<th scope="col">股票名称</th> 
<th scope="col">当前价格</th> 
<th scope="col">今日开盘</th> 
<th scope="col">昨日收盘</th> 
<th scope="col">当前差价</th> 
<th scope="col">涨跌幅度</th> 
<th scope="col">最高价格</th> 
<th scope="col">最低价格</th> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a0"></span></td> 
<td align="center"><span id="b0"></span></td> 
<td align="center"><span id="c0"></span></td> 
<td align="center"><span id="d0"></span></td> 
<td align="center"><span id="e0"></span></td> 
<td align="center"><span id="f0"></span></td> 
<td align="center"><span id="g0"></span></td> 
<td align="center"><span id="h0"></span></td> 
<td align="center"><span id="i0"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a1"></span></td> 
<td align="center"><span id="b1"></span></td> 
<td align="center"><span id="c1"></span></td> 
<td align="center"><span id="d1"></span></td> 
<td align="center"><span id="e1"></span></td> 
<td align="center"><span id="f1"></span></td> 
<td align="center"><span id="g1"></span></td> 
<td align="center"><span id="h2"></span></td> 
<td align="center"><span id="i1"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a2"></span></td> 
<td align="center"><span id="b2"></span></td> 
<td align="center"><span id="c2"></span></td> 
<td align="center"><span id="d2"></span></td> 
<td align="center"><span id="e2"></span></td> 
<td align="center"><span id="f2"></span></td> 
<td align="center"><span id="g2"></span></td> 
<td align="center"><span id="h3"></span></td> 
<td align="center"><span id="i2"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a3"></span></td> 
<td align="center"><span id="b3"></span></td> 
<td align="center"><span id="c3"></span></td> 
<td align="center"><span id="d3"></span></td> 
<td align="center"><span id="e3"></span></td> 
<td align="center"><span id="f3"></span></td> 
<td align="center"><span id="g3"></span></td> 
<td align="center"><span id="h4"></span></td> 
<td align="center"><span id="i3"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a4"></span></td> 
<td align="center"><span id="b4"></span></td> 
<td align="center"><span id="c4"></span></td> 
<td align="center"><span id="d4"></span></td> 
<td align="center"><span id="e4"></span></td> 
<td align="center"><span id="f4"></span></td> 
<td align="center"><span id="g4"></span></td> 
<td align="center"><span id="h5"></span></td> 
<td align="center"><span id="i4"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a5"></span></td> 
<td align="center"><span id="b5"></span></td> 
<td align="center"><span id="c5"></span></td> 
<td align="center"><span id="d5"></span></td> 
<td align="center"><span id="e5"></span></td> 
<td align="center"><span id="f5"></span></td> 
<td align="center"><span id="g5"></span></td> 
<td align="center"><span id="h6"></span></td> 
<td align="center"><span id="i5"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a6"></span></td> 
<td align="center"><span id="b6"></span></td> 
<td align="center"><span id="c6"></span></td> 
<td align="center"><span id="d6"></span></td> 
<td align="center"><span id="e6"></span></td> 
<td align="center"><span id="f6"></span></td> 
<td align="center"><span id="g6"></span></td> 
<td align="center"><span id="h7"></span></td> 
<td align="center"><span id="i6"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a7"></span></td> 
<td align="center"><span id="b7"></span></td> 
<td align="center"><span id="c7"></span></td> 
<td align="center"><span id="d7"></span></td> 
<td align="center"><span id="e7"></span></td> 
<td align="center"><span id="f7"></span></td> 
<td align="center"><span id="g7"></span></td> 
<td align="center"><span id="h7"></span></td> 
<td align="center"><span id="i7"></span></td> 
</tr> 
<tr class="tr_cls"> 
<td align="center"><span id="a8"></span></td> 
<td align="center"><span id="b8"></span></td> 
<td align="center"><span id="c8"></span></td> 
<td align="center"><span id="d8"></span></td> 
<td align="center"><span id="e8"></span></td> 
<td align="center"><span id="f8"></span></td> 
<td align="center"><span id="g8"></span></td> 
<td align="center"><span id="h8"></span></td> 
<td align="center"><span id="i8"></span></td> 
</tr> 
</table> 
</form> 
</body> 
</html>

习惯用prototype的,把脚本部分的代码替换一下即可。
复制代码 代码如下:

<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript">... 
function ajaxRequest()...{ 
var myAjax = new Ajax.Request( 
'http://hq.sinajs.cn/list=sh000001,sh701939,sh700016,sh700528,sh700667,sh701390,sh701398,sh701857,sh700028', 
...{ 
method: 'get', 
onComplete: setData 
} 
); 
} 
function setData(response) ...{ 
var contents = response.responseText; 
var stocks = contents.split(';'); 
for(var i=0; i<stocks.length-1; i++)...{ 
var content = stocks[i]; 
var temp1 = content.split('=')[0]; 
var temp2 = content.split('=')[1]; 
var code = temp1.substr(temp1.length - 6, 6); 
var temp3 = temp2.replace('"', ''); 
var name = temp3.split(',')[0]; 
var tday_f = temp3.split(',')[1]; 
var yest_f = temp3.split(',')[2]; 
var curr_f = temp3.split(',')[3]; 
var temp_f = curr_f - yest_f; 
$('a'+i).innerHTML = code; 
$('b'+i).innerHTML = name; 
$('c'+i).innerHTML = curr_f; 
if(curr_f > yest_f) ...{ 
$('c'+i).innerHTML = "<font color='red'>" + curr_f + "</font>"; 
} else if(curr_f < yest_f) ...{ 
$('c'+i).innerHTML = "<font color='green'>" + curr_f + "</font>"; 
} else ...{ 
$('c'+i).innerHTML = curr_f; 
} 
$('d'+i).innerHTML = tday_f; 
$('e'+i).innerHTML = yest_f; 
if(temp_f > 0) ...{ 
$('f'+i).innerHTML = "<font color='red'>" + temp_f.toFixed(2) + "</font>"; 
$('g'+i).innerHTML = "<font color='red'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %"; 
} else if(temp_f < 0) ...{ 
$('f'+i).innerHTML = "<font color='green'>" + temp_f.toFixed(2) + "</font>"; 
$('g'+i).innerHTML = "<font color='green'>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %"; 
} else ...{ 
$('f'+i).innerHTML = temp_f.toFixed(2); 
$('g'+i).innerHTML = ((temp_f / yest_f) * 100).toFixed(2) + " % "; 
} 
$('h'+i).innerHTML = temp3.split(',')[4]; 
$('i'+i).innerHTML = temp3.split(',')[5]; 
} 
} 
function pageInit() ...{ 
window.setInterval("ajaxRequest()",3000); 
} 
</script>

“如何使用ajax技术无刷新动态调用新浪股票实时数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: 如何使用ajax技术无刷新动态调用新浪股票实时数据

本文链接: https://www.lsjlt.com/news/82246.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用ajax技术无刷新动态调用新浪股票实时数据
    本篇内容介绍了“如何使用ajax技术无刷新动态调用新浪股票实时数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有...
    99+
    2024-04-02
  • 如何使用ajax技术无刷新动态调用股票信息
    这篇文章主要讲解了“如何使用ajax技术无刷新动态调用股票信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用ajax技术无刷新动态调用股票信息”吧!...
    99+
    2024-04-02
  • js如何实现股票实时刷新数据
    小编给大家分享一下js如何实现股票实时刷新数据,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!准备工作:1、数据来源2、网页数据显...
    99+
    2024-04-02
  • 如何使用局部刷新Ajax技术
    这篇文章主要介绍“如何使用局部刷新Ajax技术”,在日常操作中,相信很多人在如何使用局部刷新Ajax技术问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用局部刷新Ajax...
    99+
    2024-04-02
  • 如何使用AJAX实现无刷新数据分页
    这篇文章将为大家详细讲解有关如何使用AJAX实现无刷新数据分页,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、实现过程注意:一下的内容都是在服务器内使用的。首先要在服务器的路径下建立几个文件,比如,pa...
    99+
    2023-06-08
  • 如何使用jquery动态刷新json数据
    这篇文章将为大家详细讲解有关如何使用jquery动态刷新json数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。有个功能:web上需要定时刷新后台数据解决方案:数据通过...
    99+
    2024-04-02
  • 如何基于Ajax技术实现无刷新用户登录功能
    这篇文章主要为大家展示了“如何基于Ajax技术实现无刷新用户登录功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何基于Ajax技术实现无刷新用户登录功能”这...
    99+
    2024-04-02
  • 如何使用Ajax技术实现局部刷新商品数量和总价
    这篇文章主要介绍了如何使用Ajax技术实现局部刷新商品数量和总价,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 问题的分析  先看一下页...
    99+
    2024-04-02
  • jQ中如何使用ajax实现用户无刷新登录
    这篇文章给大家分享的是有关jQ中如何使用ajax实现用户无刷新登录的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。ajax俗称无刷新登录或局部刷新登录,这样可以提高用户体验了,文章...
    99+
    2024-04-02
  • Ajax如何实现无刷新在注册用户名时的应用
    这篇文章主要介绍Ajax如何实现无刷新在注册用户名时的应用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! var xmlHttp; ...
    99+
    2024-04-02
  • 如何使用ajax实现数据库中随机读取5条数据动态在页面中刷新
    这篇文章主要介绍了如何使用ajax实现数据库中随机读取5条数据动态在页面中刷新,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前台代码:&nb...
    99+
    2024-04-02
  • jQuery的ajax中如何使用FormData实现页面无刷新上传功能
    小编给大家分享一下jQuery的ajax中如何使用FormData实现页面无刷新上传功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1,先看效果图期望的功能和效果很简单:点击页面中的上传...
    99+
    2024-04-02
  • vue如何使用localStorage在界面刷新时清除数据
    本篇内容主要讲解“vue如何使用localStorage在界面刷新时清除数据”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何使用localStorage在界面刷新时清除数据”吧!vue中...
    99+
    2023-07-04
  • 如何使用Ajax+php数据交互并且局部刷新页面
    这篇文章主要介绍如何使用Ajax+php数据交互并且局部刷新页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!什么是Ajax?国内翻译常为“阿贾克斯”和阿贾克斯足球队同音,AJAX ...
    99+
    2024-04-02
  • 如何使用PHP删除数据并自动刷新页面
    在日常的Web开发中,数据的增删改查已经成为了必备的操作。其中删除操作虽然看起来简单,但也需要考虑到用户体验的问题。在使用PHP编写网页时,实现数据删除后自动刷新页面是一个常见需求。本文将介绍如何使用PHP删除数据并自动刷新页面。一、PHP...
    99+
    2023-05-14
  • 如何使用ajax实现无刷新改变页面内容和地址栏URL
    本篇内容主要讲解“如何使用ajax实现无刷新改变页面内容和地址栏URL”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用ajax实现无刷新改变页面内容和地址...
    99+
    2024-04-02
  • JS中如何使用localStorage防止页面动态添加数据刷新后数据丢失
    这篇文章主要为大家展示了“JS中如何使用localStorage防止页面动态添加数据刷新后数据丢失”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS中如何使用l...
    99+
    2024-04-02
  • MyBatis使用Zookeeper保存数据库的配置可动态刷新的实现代码
    核心关键点: 封装一个DataSource, 重写 getConnection 就可以实现 我们一步一步来看. 环境: Spring Cloud + MyBatis MyBatis常...
    99+
    2024-04-02
  • 如何编写Ajax无刷新在注册用户名时判断是否为空是否被使用代码
    本篇内容介绍了“如何编写Ajax无刷新在注册用户名时判断是否为空是否被使用代码”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅...
    99+
    2024-04-02
  • 如何在golang中使用WebSocket进行实时数据更新
    如何在Golang中使用WebSocket进行实时数据更新概述:WebSocket是一种为了在Web浏览器和服务器之间进行全双工通信而设计的通信技术。在Golang中,我们可以使用标准库中的net/http和github.com/goril...
    99+
    2023-12-18
    实时数据更新 Golang WebSocket实现 WebSocket数据更新
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作