Welcome

首页 / 脚本样式 / Ajax / 使用ajax技术无刷新动态调用股票信息

复制代码 代码如下:
<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: "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（"<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" 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>
 
习惯用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; 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 = "<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>

当然页面部分完全可以由脚本自动生成，以及页面动态增减股票信息等功能，就等日后修改吧。
版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图