使用jquery实时获取新浪期货数据

来源：互联网发布：matlab 矩阵范数编辑：程序博客网时间：2024/04/29 05:34

今天老板叫我做了一个事情，就是从新浪的股票模块上实时获取某一支期货的数据并且显示出来。

上网找了这方面的资料，发现新浪的股票有提供接口，只要引用这个接口就能获取当前该期货的数据。于是照做。

以新浪期货的行情中心--能源期货为例。地址为：http://vip.stock.finance.sina.com.cn/mkt/#qqny_qh

这里显示了三种石油的行情，石油行情会实时的跳动。我要做的是把某一种石油的数据摘取过来并显示在我自己的页面上。刚开始我是这样做的。

1.找到这支股票的代号，如NYMEX原油的代号是CL，然后它的接口就是：http://hq.sinajs.cn/list=hf_CL 只要你访问这个地址，就会发现一串字符串，该字符串代表了你访问的时候，这支股票的实时数据。如：

var hq_str_hf_CL="82.90,0.1813,82.89,82.90,83.48,82.67,19:20:37,82.75,83.09,804,0,0,2014-10-20,NYMEX原油";

这串数据包含了期货的最新价格，昨收，今开，最高价，最低价等信息。

新建一个html文件，引用jquery.min.js，然后再添加上面的链接<script type="text/javascript" src="http://hq.sinajs.cn/list=hf_CL"></script>既可以引用这个js文件，从而获取里面的hq_str_hf_CL字符串。

具体操作如下：var elements=hq_str_hf_CL.split(",");这条代码可以将这个字符串拆分成一个数组，这样我们需要数组里面的数据，就可以对其进行操作了。

比如：我需要将一个数据显示到某个html元素中，就可以$("#divtest").text(elements[3]);将数组中的第四个元素放到id为divtest的html元素中。

但是问题来了，这串字符串是应该是实时改变的，但是我只有在刷新页面的时候，才能去更新它里面的数据。而我想要做到的是，程序自己实时获取数据并实时的显示在页面上。

后来我就把获取和显示的代码写成一个方法refresh_fuc，然后通过setInterval(refresh_fuc, 1000); 希望能1秒钟刷新一次数据，可是没有用。百思不得其解。

后来请教同事，终于找到原因，那是因为我把引用js的代码写在<head>里面，也就是相当于只在页面加载的时候获取了那个字符串hq_str_hf_CL，所以即便我反复执行获取字符串的操作，我获取的字符串还是加载的时候的那个字符串。怪不得数据一直不变。

2.后面经同事建议，我才用了ajax向源页面发送请求的方式来获取字符串，把ajax代码写在refresh_fuc里面，还是用setinterval()方法每隔一秒钟调用一次，这次才实现了实时刷新。这是因为我每次发送请求得到的都是发送请求时候的字符串。具体代码如下：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><META HTTP-EQUIV=REFREASH CONTENT=1> <title>美国原油接口数据</title><script type="text/javascript" src="Jscript/jquery-1.8.2.js"></script><style type="text/css">body{font-size:12px;}table{border:solid 1px #999999; border-collapse:collapse; }tr{border:solid 1px #CCC}th{font-weight:normal; color:#009}th,td{padding:15px;}.trcolor{background-color:#E8E8E8}div{margin-bottom:5px; padding:5px;}</style><script type="text/javascript">var _interval; function refresh_fuc(){  $.ajax({  cache : true,  url:"http://hq.sinajs.cn/list=hf_CL",  type : "GET",dataType : "script",success : function(){var elements=hq_str_hf_CL.split(",");$("table tr:eq(1) td").each(function(index) {//var rate=1;var rate=$("#exchange_rate").val()*10;switch(index){case 0:$(this).text(elements[13]);break;case 1:$(this).text((elements[0]-elements[7]).toFixed(3));break;case 2:$(this).text((elements[0]*rate).toFixed(3));break;case 3:$(this).text((elements[7]*rate).toFixed(3));break;case 4:$(this).text((elements[8]*rate).toFixed(3));break;case 5:$(this).text((elements[4]*rate).toFixed(3));break;case 6:$(this).text((elements[5]*rate).toFixed(3));break;case 7:$(this).text((elements[2]*rate).toFixed(3));break;case 8:$(this).text((elements[3]*rate).toFixed(3));break;case 9:$(this).text(elements[10]);break;case 10:$(this).text(elements[11]);break;case 11:$(this).text(elements[9]);break;case 12:$(this).text((elements[0]*rate-$("#strike_price").val()).toFixed(3));break;case 13:$(this).text(elements[12]);break;case 14:$(this).text(elements[6]);break;default: $(this).text("");}            });}  }); }$(document).ready(function() {  $("table tr:odd").addClass("trcolor");    $("#btn_query").click(function(e) {if($("#strike_price").val()==""){alert("请输入成交价！");}else{            setInterval(refresh_fuc, 1000); }        });    }) </script></head><body><div><span>输入汇率</span><input type="text" id="exchange_rate" value="6.1239" />   <span>成交价</span><input type="text"  id="strike_price" /> <button id="btn_query">查询</button></div><table><tr><th>名称</th><th>涨跌额</th><th>最新价</th><th>昨收</th><th>今开</th><th>最高</th><th>最低</th><th>买入</th><th>卖出</th><th>买量</th><th>卖量</th><th>持仓量</th><th>浮动盈亏</th><th>日期</th><th>时间</th></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></body></html>

有兴趣的朋友可以去试试。

1 0