快捷導(dǎo)航

ajax無(wú)刷新動(dòng)態(tài)調(diào)用股票信息(改良版)

更新時(shí)間：2008年11月01日 23:48:21 作者：

今日閑來(lái)無(wú)事，把上次寫(xiě)的代碼稍微改了改。增加了動(dòng)態(tài)追加和刪除股票信息的功能（代碼基于jquery運(yùn)行：http://jquery.com/）。由于對(duì)Ajax技術(shù)的認(rèn)識(shí)還只是在初級(jí)階段，總覺(jué)得這么些有點(diǎn)別扭，希望大蝦能夠指點(diǎn)一二。

復(fù)制代碼代碼如下:

<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()...{ 
var url = $("#stockurl").val() + $("#stockinit").val(); 
$.ajax(...{ 
url: url, 
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]); 
} 
} 
}); 
} 

$(document).ready(function()...{ 

var stocks = $("#stockinit").val().split(','); 
for(var i=0; i<stocks.length; i++)...{ 
addRows(); 
} 

$("#insrow").click(function()...{ 

var stockcd = $("#stockid").val(); 
if(stockcd == "")...{ 
alert("股票代號(hào)不能為空！"); 
$("#stockid").focus(); 
return; 
} 
if(stockcd.length != 6)...{ 
alert("股票代號(hào)只能是6位！"); 
$("#stockid").focus(); 
return; 
} 
var div = 'sh'; 
if(document.getElementById("sz_id").checked)...{ div = "sz";} 
var stocks = $("#stockinit").val(); 
$("#stockinit").val(stocks + "," + div + stockcd); 
addRows(); 
}); 

$("#delrow").click(function()...{ 
var table = document.getElementById("tableId"); 
var index = table.rows.length; 
if (index < 2)...{ 
alert("已經(jīng)沒(méi)有可刪除的行了!"); 
} else ...{ 
table.deleteRow(index - 1); 
var stockvalue = $("#stockinit").val(); 
var count = stockvalue.split(',').length; 
if(count == 1) ...{ 
stockvalue = ""; 
} else ...{ 
stockvalue = stockvalue.substr(0, stockvalue.length - 9); 
} 
$("#stockinit").val(stockvalue); 
} 
}); 

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

function addRows()...{ 
var table = document.getElementById("tableId"); 
var index = table.rows.length; 
var str=""; 
var row = index - 1; 
str+='<tr class="tr_cls">' 
str+='<td align="center"><span id="' + "a" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "b" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "c" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "d" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "e" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "f" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "g" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "h" + row + '"></span></td>' 
str+='<td align="center"><span id="' + "i" + row + '"></span></td>' 
str+='</tr>'; 
$("#tablebody").append(str); 
} 
</script> 
<style>... 
.tr_cls {...}{ 
height:30px; 
font-size:16px; 
font-family:"Times New Roman", Times, serif; 
background-color:#FFFFCC 
} 
</style> 
</head> 
<body> 
<form> 
<input type="hidden" id="stockurl" value="http://hq.sinajs.cn/list=" /> 
<input type="hidden" id="stockinit" value="sh000001,sz399001,sh601939,sh600016,sh600528,sh600667,sh601390,sh601857,sz000532,sh600019,sh601111,sh601600,sh601006,sh601333,sh601398,sh601988,sh601328" /> 
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" > 
<tr> 
<td width="115px"> 
代號(hào):<input type="text" id="stockid" size="6"> 
</td> 
<td width="150px"> 
區(qū)分:上海<input type="radio" name="rad" id="sh_id" checked>深證<input type="radio" name="rad" id="sz_id"> 
</td> 
<td width="40px"> 
<input type="button" id="insrow" value="行追加"> 
</td> 
<td width="495px"> 
<input type="button" id="delrow" value="行削除"> 
</td> 
</tr> 
<tr> 
<td colspan="4"> 
<div style="overflow-y:scroll; overflow-x:auto; height:392px; width:817px"> 
<table id="tableId" width="800" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#000000"> 
<tr bgcolor="#3399FF" height="30px"> 
<th scope="col">股票代號(hào)</th> 
<th scope="col">股票名稱(chēng)</th> 
<th scope="col">當(dāng)前價(jià)格</th> 
<th scope="col">今日開(kāi)盤(pán)</th> 
<th scope="col">昨日收盤(pán)</th> 
<th scope="col">當(dāng)前差價(jià)</th> 
<th scope="col">漲跌幅度</th> 
<th scope="col">最高價(jià)格</th> 
<th scope="col">最低價(jià)格</th> 
</tr> 
<tbody id="tablebody"> 
</tbody> 
</table> 
</div> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html>