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

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

复制代码 代码如下:
<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>

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

相關文章

前端開發 最新文章