简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Use ajax technology to dynamically call Sina stock real-time data without refreshing

Use ajax technology to dynamically call Sina stock real-time data without refreshing

亚连
亚连Original
2018-05-25 15:38:022527browse

Due to the recent slow internet speed, the web page cannot be opened when checking stock information. I have been studying ajax these days, so I used jquery to make a page that automatically reads Sina stock real-time data

Sina's financial channel has always felt that it has done a good job. However, due to the recent slow Internet speed, the web page cannot be opened when checking stock information. I have been studying ajax these days, so I used jquery to make a page that automatically reads Sina stock real-time data. 

<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>

If you are used to using prototype, just replace the code in the script part.
Copy code The code is as follows:

<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>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

A brief analysis of the use of Ajax in Asp.net MVC

JQuery Ajax dynamically generates Tables

A simple implementation of Ajax showing progress during the request

# #

The above is the detailed content of Use ajax technology to dynamically call Sina stock real-time data without refreshing. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Use vue-i18n to internationalize vue codeNext article：Use vue-i18n to internationalize vue code

Related articles

See more