使用ajax技术无刷新动态调用股票信息(改良版)

最新推荐文章于 2025-07-27 12:12:13 发布

原创最新推荐文章于 2025-07-27 12:12:13 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #function #input #table #div #button

Ajax技术专栏收录该内容

103 篇文章

订阅专栏

本文介绍了一个使用jQuery和Ajax技术实现的股票信息动态更新系统。该系统可以实时获取并展示股票的最新价格、涨跌幅等信息，并支持手动添加或删除关注的股票。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今日闲来无事，把上次写的代码稍微改了改。增加了动态追加和删除股票信息的功能（代码基于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 >