今天老板叫我做了一个事情，就是从新浪的股票模块上实时获取某一支期货的数据并且显示出来。
上网找了这方面的资料，发现新浪的股票有提供接口，只要引用这个接口就能获取当前该期货的数据。于是照做。
以新浪期货的行情中心--能源期货为例。地址为：
这里显示了三种石油的行情，石油行情会实时的跳动。我要做的是把某一种石油的数据摘取过来并显示在我自己的页面上。刚开始我是这样做的。
1.找到这支股票的代号，如的代号是CL，然后它的接口就是：=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="=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" ""> <html xmlns=""> <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:"=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>有兴趣的朋友可以去试试。
相关文章
精彩导读
热门资讯
关注我们
