如何使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息-創(chuàng)新互聯(lián)

這篇文章主要講解了“如何使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息”吧！

創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗，為客戶提供超值的營銷型網(wǎng)站建設(shè)服務(wù)，我們始終認為：好的營銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個人等客戶提供了成都做網(wǎng)站、網(wǎng)站制作服務(wù)，以良好的商業(yè)信譽，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

復(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()...{
$.ajax(...{
url: 'http://hq.sinajs.cn/list=sh000001,sh701939,sh700016,sh700528,sh700667,sh701390,sh701398,sh701857,sh700028',
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">當(dāng)前價格</th>
<th scope="col">今日開盤</th>
<th scope="col">昨日收盤</th>
<th scope="col">當(dāng)前差價</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="h2"></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="h3"></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="h4"></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="h5"></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="h6"></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="h7"></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>


 
習(xí)慣用prototype的，把腳本部分的代碼替換一下即可。


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


<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,sh701939,sh700016,sh700528,sh700667,sh701390,sh701398,sh701857,sh700028',
...{
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>



當(dāng)然頁面部分完全可以由腳本自動生成，以及頁面動態(tài)增減股票信息等功能，就等日后修改吧。

感謝各位的閱讀，以上就是“如何使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)站標(biāo)題：如何使用ajax技術(shù)無刷新動態(tài)調(diào)用股票信息-創(chuàng)新互聯(lián)
文章出自：http://muchs.cn/article12/djhhgc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站收錄、微信小程序、網(wǎng)頁設(shè)計公司、移動網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站優(yōu)化排名