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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > ajax无刷新动态调用股票信息(改良版)

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 343 ::

收藏到网摘: n/a

让任务管理器中的CPU跳舞的js代码 js Clip的奇思妙想之文字拼接效果

今日闲来无事，把上次写的代码稍微改了改。增加了动态追加和删除股票信息的功能（代码基于jquery运行：http://jquery.com/）。由于对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()...{ 
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("股票代号不能为空！"); 
$("#stockid").focus(); 
return; 
} 
if(stockcd.length != 6)...{ 
alert("股票代号只能是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("已经没有可删除的行了!"); 
} 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"> 
代号:<input type="text" id="stockid" size="6"> 
</td> 
<td width="150px"> 
区分:上海<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">股票代号</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> 
<tbody id="tablebody"> 
</tbody> 
</table> 
</div> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html>

让任务管理器中的CPU跳舞的js代码 js Clip的奇思妙想之文字拼接效果

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

评论 (0) All