Maison > interface Web > js tutoriel > le corps du texte

Utilisez la technologie ajax pour appeler dynamiquement les données boursières Sina en temps réel sans actualiser

亚连
Libérer: 2018-05-25 15:38:02
original
2580 Les gens l'ont consulté

En raison de la lenteur de l'Internet récemment, la page Web ne peut toujours pas être ouverte lors de la vérification des informations boursières. J'étudie l'ajax ces jours-ci, j'ai donc utilisé jquery pour créer une page qui lit automatiquement les données boursières de Sina en temps réel

Le canal financier de Sina a toujours été bien géré. Cependant, en raison de la lenteur récente de l'Internet, la page Web ne peut pas être ouverte lors de la vérification des informations boursières. J'étudie Ajax ces jours-ci, j'ai donc utilisé jquery pour créer une page qui lit automatiquement les données en temps réel des actions Sina.

<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>
Copier après la connexion

Si vous avez l'habitude d'utiliser des prototypes, remplacez simplement le code dans la partie script.
Copier le code Le code est le suivant :

<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>
Copier après la connexion

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde. l'avenir.

Articles connexes :

Une brève analyse de l'utilisation d'Ajax dans Asp.net MVC

JQuery Ajax génère dynamiquement tables

Une implémentation simple d'Ajax montrant la progression lors de la requête

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal