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

2016-02-19 11:29 43 1 收藏

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

【 tulaoshi.com - Web开发 】

代码如下:

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

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

来源:http://www.tulaoshi.com/n/20160219/1597677.html

延伸阅读
标签: Web开发
1.建立一个aspx页面 html代码 html xmlns="http://www.w3.org/1999/xhtml" head id="Head1" runat="server"     title小山/title     link type="text/css" href="../../Styles/tree_css/tree.css" rel="stylesheet" /head body     form id="Form1" runat...
标签: Web开发
做公司网站时的一个应用,用猫东的表单验证插件做实时的验证,和jquery的ajax提交数据,获取评论的时候加入简单的分页 原理很简单,注意一下编码问题就行了 实现了获取评论无刷新,发表评论无刷新,页面获取评论时显示loading加载效果 jquery真的是一个非常优秀的JS库,简单容易掌握,对于网页中的多级菜单、级联效果、Tab...
标签: Web开发
将index.html和upload.php文件保存到apache工作目录,例子使用安装目录D:/Program Files/Apache Software Foundation/Apache2.2/htdocs/ AJAX 客户端页面代码: index.html html  body  h1Ajax file upload sample/h1br/input id="uplaod" name="btn_send" type="button" value="上传测试"/  div id=result/div  PRE...
标签: Web开发
尤其是在Jquery,porotype,Ext等框架流行之后,大量简化的代码可说是为程序员带来了福音, 从繁重的代码工作之中解脱出来,轻易的就可以实现过去书写复杂的功能。 不过有利有弊,到如今,习惯了使用各种框架,而很少自己书写内部源码的程序员们,还有几个记得Ajax那其实并不算复杂的基本代码呢? 今天,为了不遗忘当初的热忱,我把这基础的...
标签: Web开发
在网页中实现页面无刷新的进度条显示不是一件很麻烦的事情,但如果这个进度条要能准确反映当前事务或者复杂逻辑的执行进度,那么却并不是一件容易的事情,目前AJAX技术流行,所以本文作者试想通过AJAX来实现网页准确进度条,以銄读者。  首先应该想一个问题,复杂事务或者事务逻辑如果不按线程方式运行,运行在JAVA运行中根本无法...

经验教程

77

收藏

79
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部