搜尋

首頁 >web前端 >js教程 >使用ajax技術無刷新動態調用新浪股票即時數據

使用ajax技術無刷新動態調用新浪股票即時數據

亚连
亚连原創
2018-05-25 15:38:022599瀏覽

由於最近網路速度慢的緣故，查看股票資訊時網頁老是打不開。這幾天一直在研究ajax，於是用jquery自己做了一個自動讀取新浪股票實時數據的頁面

#新浪的財金頻道一直感覺做得很好。但由於最近網路速度慢的緣故，查看股票資訊時網頁老是打不開。這幾天一直在研究ajax，於是用jquery自己做了一個自動讀取新浪股票即時數據的頁面。 

<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: &#39;http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028&#39;, 
type: &#39;GET&#39;, 
dataType: &#39;html&#39;, 
timeout: 2000, 
success: function(response)...{ 
var stocks = response.split(&#39;;&#39;); 
for(var i=0; i<stocks.length-1; i++)...{ 
var content = stocks[i]; 
var temp1 = content.split(&#39;=&#39;)[0]; 
var temp2 = content.split(&#39;=&#39;)[1]; 
var code = temp1.substr(temp1.length - 6, 6); 
var temp3 = temp2.replace(&#39;"&#39;, &#39;&#39;); 
var name = temp3.split(&#39;,&#39;)[0]; 
var tday_f = temp3.split(&#39;,&#39;)[1]; 
var yest_f = temp3.split(&#39;,&#39;)[2]; 
var curr_f = temp3.split(&#39;,&#39;)[3]; 
var temp_f = curr_f - yest_f; 
$(&#39;#a&#39;+i).html(code); 
$(&#39;#b&#39;+i).html(name); 
if(curr_f > yest_f) ...{ 
$(&#39;#c&#39;+i).html("<font color=&#39;red&#39;>" + curr_f + "</font>"); 
} else if(curr_f < yest_f) ...{ 
$(&#39;#c&#39;+i).html("<font color=&#39;green&#39;>" + curr_f + "</font>"); 
} else ...{ 
$(&#39;#c&#39;+i).html(curr_f); 
} 
$(&#39;#d&#39;+i).html(tday_f); 
$(&#39;#e&#39;+i).html(yest_f); 
if(temp_f > 0) ...{ 
$(&#39;#f&#39;+i).html("<font color=&#39;red&#39;>" + temp_f.toFixed(2) + "</font>"); 
$(&#39;#g&#39;+i).html("<font color=&#39;red&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % "); 
} else if(temp_f < 0) ...{ 
$(&#39;#f&#39;+i).html("<font color=&#39;green&#39;>" + temp_f.toFixed(2) + "</font>"); 
$(&#39;#g&#39;+i).html("<font color=&#39;green&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> % "); 
} else ...{ 
$(&#39;#f&#39;+i).html(temp_f.toFixed(2)); 
$(&#39;#g&#39;+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % "); 
} 
$(&#39;#h&#39;+i).html(temp3.split(&#39;,&#39;)[4]); 
$(&#39;#i&#39;+i).html(temp3.split(&#39;,&#39;)[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="h1"></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="h2"></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="h3"></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="h4"></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="h5"></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="h6"></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( 
&#39;http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028&#39;, 
...{ 
method: &#39;get&#39;, 
onComplete: setData 
} 
); 
} 
function setData(response) ...{ 
var contents = response.responseText; 
var stocks = contents.split(&#39;;&#39;); 
for(var i=0; i<stocks.length-1; i++)...{ 
var content = stocks[i]; 
var temp1 = content.split(&#39;=&#39;)[0]; 
var temp2 = content.split(&#39;=&#39;)[1]; 
var code = temp1.substr(temp1.length - 6, 6); 
var temp3 = temp2.replace(&#39;"&#39;, &#39;&#39;); 
var name = temp3.split(&#39;,&#39;)[0]; 
var tday_f = temp3.split(&#39;,&#39;)[1]; 
var yest_f = temp3.split(&#39;,&#39;)[2]; 
var curr_f = temp3.split(&#39;,&#39;)[3]; 
var temp_f = curr_f - yest_f; 
$(&#39;a&#39;+i).innerHTML = code; 
$(&#39;b&#39;+i).innerHTML = name; 
$(&#39;c&#39;+i).innerHTML = curr_f; 
if(curr_f > yest_f) ...{ 
$(&#39;c&#39;+i).innerHTML = "<font color=&#39;red&#39;>" + curr_f + "</font>"; 
} else if(curr_f < yest_f) ...{ 
$(&#39;c&#39;+i).innerHTML = "<font color=&#39;green&#39;>" + curr_f + "</font>"; 
} else ...{ 
$(&#39;c&#39;+i).innerHTML = curr_f; 
} 
$(&#39;d&#39;+i).innerHTML = tday_f; 
$(&#39;e&#39;+i).innerHTML = yest_f; 
if(temp_f > 0) ...{ 
$(&#39;f&#39;+i).innerHTML = "<font color=&#39;red&#39;>" + temp_f.toFixed(2) + "</font>"; 
$(&#39;g&#39;+i).innerHTML = "<font color=&#39;red&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %"; 
} else if(temp_f < 0) ...{ 
$(&#39;f&#39;+i).innerHTML = "<font color=&#39;green&#39;>" + temp_f.toFixed(2) + "</font>"; 
$(&#39;g&#39;+i).innerHTML = "<font color=&#39;green&#39;>" + ((temp_f / yest_f) * 100).toFixed(2) + "</font> %"; 
} else ...{ 
$(&#39;f&#39;+i).innerHTML = temp_f.toFixed(2); 
$(&#39;g&#39;+i).innerHTML = ((temp_f / yest_f) * 100).toFixed(2) + " % "; 
} 
$(&#39;h&#39;+i).innerHTML = temp3.split(&#39;,&#39;)[4]; 
$(&#39;i&#39;+i).innerHTML = temp3.split(&#39;,&#39;)[5]; 
} 
} 
function pageInit() ...{ 
window.setInterval("ajaxRequest()",3000); 
} 
</script>

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

淺析Asp.net MVC 中Ajax的使用

JQuery Ajax動態產生Table表格

Ajax在請求過程中顯示進度的簡單實作

以上是使用ajax技術無刷新動態調用新浪股票即時數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：使用vue-i18n讓vue程式碼國際化下一篇：使用vue-i18n讓vue程式碼國際化

相關文章

看更多