使用ajax技术无刷新动态调用股票信息

最新推荐文章于 2018-04-25 05:26:55 发布

昆山人在上海

最新推荐文章于 2018-04-25 05:26:55 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Ajax技术文章标签： ajax class function prototype html table

本文链接：https://blog.youkuaiyun.com/kunshan_shenbin/article/details/1921230

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

由于新浪财金频道网页加载速度缓慢，作者使用jQuery创建了一个自动读取新浪股票实时数据的页面，该页面每3秒自动更新一次股票信息，并通过颜色区分股价涨跌。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新浪的财金频道一直感觉做得很好。但由于最近网速慢的缘故，查看股票信息时网页老是打不开。这几天一直在研究ajax，于是用jquery自己做了一个自动读取新浪股票实时数据的页面。

<html>

<head>

function ajaxRequest(){

$.ajax({

url: 'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028',

type: 'GET',

dataType: 'html',

timeout: 2000,

success: function(response){

var stocks = response.split(';');

for(var i=0; i<stocks.length-1; i++){

var content = stocks[i];

var temp1 = content.split('=')[0];

var temp2 = content.split('=')[1];

var code = temp1.substr(temp1.length - 6, 6);

var temp3 = temp2.replace('"', '');

var name = temp3.split(',')[0];

var tday_f = temp3.split(',')[1];

var yest_f = temp3.split(',')[2];

var curr_f = temp3.split(',')[3];

var temp_f = curr_f - yest_f;

$('#a'+i).html(code);

$('#b'+i).html(name);

if(curr_f > yest_f) {

$('#c'+i).html("" + curr_f + "");

} else if(curr_f < yest_f) {

$('#c'+i).html("" + curr_f + "");

} else {

$('#c'+i).html(curr_f);

}

$('#d'+i).html(tday_f);

$('#e'+i).html(yest_f);

if(temp_f > 0) {

$('#f'+i).html("" + temp_f.toFixed(2) + "");

$('#g'+i).html("" + ((temp_f / yest_f) * 100).toFixed(2) + " % ");

} else if(temp_f < 0) {

$('#f'+i).html("" + temp_f.toFixed(2) + "");

$('#g'+i).html("" + ((temp_f / yest_f) * 100).toFixed(2) + " % ");

} else {

$('#f'+i).html(temp_f.toFixed(2));

$('#g'+i).html(((temp_f / yest_f) * 100).toFixed(2) + " % ");

}

$('#h'+i).html(temp3.split(',')[4]);

$('#i'+i).html(temp3.split(',')[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>

<form>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</form>

</body>

</html>

习惯用prototype的，把脚本部分的代码替换一下即可。

function ajaxRequest(){

var myAjax = new Ajax.Request(

'http://hq.sinajs.cn/list=sh000001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601398,sh601857,sh600028',

{

method: 'get',

onComplete: setData

}

);

}

function setData(response) {

var contents = response.responseText;

var stocks = contents.split(';');

for(var i=0; i<stocks.length-1; i++){

var content = stocks[i];

var temp1 = content.split('=')[0];

var temp2 = content.split('=')[1];

var code = temp1.substr(temp1.length - 6, 6);

var temp3 = temp2.replace('"', '');

var name = temp3.split(',')[0];

var tday_f = temp3.split(',')[1];

var yest_f = temp3.split(',')[2];

var curr_f = temp3.split(',')[3];

var temp_f = curr_f - yest_f;

$('a'+i).innerHTML = code;

$('b'+i).innerHTML = name;

$('c'+i).innerHTML = curr_f;

if(curr_f > yest_f) {

$('c'+i).innerHTML = "" + curr_f + "";

} else if(curr_f < yest_f) {

$('c'+i).innerHTML = "" + curr_f + "";

} else {

$('c'+i).innerHTML = curr_f;

}

$('d'+i).innerHTML = tday_f;

$('e'+i).innerHTML = yest_f;

if(temp_f > 0) {

$('f'+i).innerHTML = "" + temp_f.toFixed(2) + "";

$('g'+i).innerHTML = "" + ((temp_f / yest_f) * 100).toFixed(2) + " %";

} else if(temp_f < 0) {

$('f'+i).innerHTML = "" + temp_f.toFixed(2) + "";

$('g'+i).innerHTML = "" + ((temp_f / yest_f) * 100).toFixed(2) + " %";

} else {

$('f'+i).innerHTML = temp_f.toFixed(2);

$('g'+i).innerHTML = ((temp_f / yest_f) * 100).toFixed(2) + " % ";

}

$('h'+i).innerHTML = temp3.split(',')[4];

$('i'+i).innerHTML = temp3.split(',')[5];

}

function pageInit() {

window.setInterval("ajaxRequest()",3000);

}

</script>

当然页面部分完全可以由脚本自动生成，以及页面动态增减股票信息等功能，就等日后修改吧。