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

October丶蕃团

October丶蕃团

2016-02-19 11:29

有一种朋友不在生活里,却在生命力;有一种陪伴不在身边,却在心间。图老师即在大家的生活中又在身边。这么贴心的服务你感受到了吗?话不多说下面就和大家分享使用ajax技术无刷新动态调用股票信息吧。
代码如下:

html
head
titleajax 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: '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; istocks.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("font color='red'" + curr_f + "/font");
} else if(curr_f yest_f) ...{
$('#c'+i).html("font color='green'" + curr_f + "/font");
} else ...{
$('#c'+i).html(curr_f);
}
$('#d'+i).html(tday_f);
$('#e'+i).html(yest_f);
if(temp_f 0) ...{
$('#f'+i).html("font color='red'" + temp_f.toFixed(2) + "/font");
$('#g'+i).html("font color='red'" + ((temp_f / yest_f) * 100).toFixed(2) + "/font % ");
} else if(temp_f 0) ...{
$('#f'+i).html("font color='green'" + temp_f.toFixed(2) + "/font");
$('#g'+i).html("font color='green'" + ((temp_f / yest_f) * 100).toFixed(2) + "/font % ");
} 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
body onLoad="pageInit();"
form
table width="800" style="text-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 style="text-align:center"span id="a0"/span/td
td style="text-align:center"span id="b0"/span/td
td style="text-align:center"span id="c0"/span/td
td style="text-align:center"span id="d0"/span/td
td style="text-align:center"span id="e0"/span/td
td style="text-align:center"span id="f0"/span/td
td style="text-align:center"span id="g0"/span/td
td style="text-align:center"span id="h0"/span/td
td style="text-align:center"span id="i0"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a1"/span/td
td style="text-align:center"span id="b1"/span/td
td style="text-align:center"span id="c1"/span/td
td style="text-align:center"span id="d1"/span/td
td style="text-align:center"span id="e1"/span/td
td style="text-align:center"span id="f1"/span/td
td style="text-align:center"span id="g1"/span/td
td style="text-align:center"span id="h1"/span/td
td style="text-align:center"span id="i1"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a2"/span/td
td style="text-align:center"span id="b2"/span/td
td style="text-align:center"span id="c2"/span/td
td style="text-align:center"span id="d2"/span/td
td style="text-align:center"span id="e2"/span/td
td style="text-align:center"span id="f2"/span/td
td style="text-align:center"span id="g2"/span/td
td style="text-align:center"span id="h2"/span/td
td style="text-align:center"span id="i2"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a3"/span/td
td style="text-align:center"span id="b3"/span/td
td style="text-align:center"span id="c3"/span/td
td style="text-align:center"span id="d3"/span/td
td style="text-align:center"span id="e3"/span/td
td style="text-align:center"span id="f3"/span/td
td style="text-align:center"span id="g3"/span/td
td style="text-align:center"span id="h3"/span/td
td style="text-align:center"span id="i3"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a4"/span/td
td style="text-align:center"span id="b4"/span/td
td style="text-align:center"span id="c4"/span/td
td style="text-align:center"span id="d4"/span/td
td style="text-align:center"span id="e4"/span/td
td style="text-align:center"span id="f4"/span/td
td style="text-align:center"span id="g4"/span/td
td style="text-align:center"span id="h4"/span/td
td style="text-align:center"span id="i4"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a5"/span/td
td style="text-align:center"span id="b5"/span/td
td style="text-align:center"span id="c5"/span/td
td style="text-align:center"span id="d5"/span/td
td style="text-align:center"span id="e5"/span/td
td style="text-align:center"span id="f5"/span/td
td style="text-align:center"span id="g5"/span/td
td style="text-align:center"span id="h5"/span/td
td style="text-align:center"span id="i5"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a6"/span/td
td style="text-align:center"span id="b6"/span/td
td style="text-align:center"span id="c6"/span/td
td style="text-align:center"span id="d6"/span/td
td style="text-align:center"span id="e6"/span/td
td style="text-align:center"span id="f6"/span/td
td style="text-align:center"span id="g6"/span/td
td style="text-align:center"span id="h6"/span/td
td style="text-align:center"span id="i6"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a7"/span/td
td style="text-align:center"span id="b7"/span/td
td style="text-align:center"span id="c7"/span/td
td style="text-align:center"span id="d7"/span/td
td style="text-align:center"span id="e7"/span/td
td style="text-align:center"span id="f7"/span/td
td style="text-align:center"span id="g7"/span/td
td style="text-align:center"span id="h7"/span/td
td style="text-align:center"span id="i7"/span/td
/tr
tr class="tr_cls"
td style="text-align:center"span id="a8"/span/td
td style="text-align:center"span id="b8"/span/td
td style="text-align:center"span id="c8"/span/td
td style="text-align:center"span id="d8"/span/td
td style="text-align:center"span id="e8"/span/td
td style="text-align:center"span id="f8"/span/td
td style="text-align:center"span id="g8"/span/td
td style="text-align:center"span id="h8"/span/td
td style="text-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(
'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; istocks.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 = "font color='red'" + curr_f + "/font";
} else if(curr_f yest_f) ...{
$('c'+i).innerHTML = "font color='green'" + curr_f + "/font";
} else ...{
$('c'+i).innerHTML = curr_f;
}
$('d'+i).innerHTML = tday_f;
$('e'+i).innerHTML = yest_f;
if(temp_f 0) ...{
$('f'+i).innerHTML = "font color='red'" + temp_f.toFixed(2) + "/font";
$('g'+i).innerHTML = "font color='red'" + ((temp_f / yest_f) * 100).toFixed(2) + "/font %";
} else if(temp_f 0) ...{
$('f'+i).innerHTML = "font color='green'" + temp_f.toFixed(2) + "/font";
$('g'+i).innerHTML = "font color='green'" + ((temp_f / yest_f) * 100).toFixed(2) + "/font %";
} 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

当然页面部分完全可以由脚本自动生成,以及页面动态增减股票信息等功能,就等日后修改吧。
展开更多 50%)
分享

猜你喜欢

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

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

ajax无刷新动态调用股票信息(改良版)

Web开发
ajax无刷新动态调用股票信息(改良版)

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Ajax技术(WEB无刷新提交数据)-

Web开发
Ajax技术(WEB无刷新提交数据)-

Ajax技术(WEB无刷新提交数据)

Web开发
Ajax技术(WEB无刷新提交数据)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

使用AJAX技术实现网页无闪自动局部刷新

Web开发
使用AJAX技术实现网页无闪自动局部刷新

AJAX技术 vs 传统的ASP无刷新技术

电脑网络
AJAX技术 vs 传统的ASP无刷新技术

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

用Ajax读取xml文件的简单例子

用Ajax读取xml文件的简单例子

Win10恶意软件删除工具的使用教程

Win10恶意软件删除工具的使用教程
下拉加载更多内容 ↓