淺析ajax請求json數(shù)據(jù)并用js解析(示例分析)
自從接觸了jquery就喜歡上了前端開發(fā),而且深深感受到了前端開發(fā)的強大與重要之處。同時也想為asp.net鳴不平,事實上asp.net并沒有臃腫,說它臃腫的人無非是那些不了解它的人,可能他們看見過一些asp.net低級程序員在不斷往頁面里拖控件,然后發(fā)現(xiàn)生成的頁面中含有大量的垃圾代碼,而且?guī)缀醢阉械倪壿嬏幚矶紝懺诹朔?wù)器端,覺得服務(wù)器壓力太大了。事實上,剛?cè)腴Tasp.net的人會有拖控件的習慣,但是當你再深入你會發(fā)現(xiàn),最終asp.net的開發(fā)模式還是跟PHP、jsp等其它web開發(fā)模式是一樣的,PHP是html+css+js+PHP語言,asp.net是html+css+js+C#語言,唯一不同的只是服務(wù)器端語言而已(面向開發(fā)人員來說),如果看到這里還說asp.net很臃腫,因為需要.net框架的支持,那么為什么不說jsp很臃腫?jsp也需要java虛擬機的支持??!所有的web開發(fā)都是基于客戶端發(fā)請求-服務(wù)器端返回數(shù)據(jù)-客戶端再處理數(shù)據(jù)這個模式,而且asp.net開發(fā)模式的好處在于很好地分離了服務(wù)器端與客戶端的代碼,不用在html里嵌套服務(wù)器端的代碼——當然這種模式現(xiàn)在已經(jīng)幾乎被各種web開發(fā)采用了。
扯遠了。我們今天要掌握的很少,我比較喜歡用很少的代碼來寫demo,這樣大家比較容易掌握(內(nèi)容有點低級,大神請繞道)。
我們建一個這樣的web項目:

首先寫客戶端的html代碼
<table>
<thead>
<tr>
<td>學號</td>
<td>姓名</td>
<td>班別</td>
<td>性別</td>
<td>電話</td>
</tr>
</thead>
<tbody></tbody>
</table>
<input id="btnget" type="button" value="加載數(shù)據(jù)" />
js代碼
$(function () {
$("#btnget").click(function () {
$.ajax({
type: "post",
dataType: "json",
url: "data.ashx",
success: function (msg) {
var str = "";
for (i in msg) {
str += "<tr><td>" + msg[i].id + "</td><td>" + msg[i].name + "</td><td>" + msg[i].cla + "</td><td>" + msg[i].sex + "</td><td>" + msg[i].tel + "</td></tr>";
}
$("tbody").append(str);
}
});
});
});
為了使表格好看一些,我們定義一下它的樣式
<style type="text/css">
table {
border-collapse: collapse;
}
table td {
text-align: center;
border: 1px solid gray;
padding: 3px 10px;
}
</style>
然后寫服務(wù)器端返回json數(shù)據(jù)的代碼
string data = "[{\"id\":\"2010324268\",\"name\":\"林宇\",\"cla\":\"10軟件\",\"sex\":\"男\(zhòng)",\"tel\":\"13800138000\"},{\"id\":\"2010324256\",\"name\":\"李四\",\"cla\":\"10網(wǎng)絡(luò)\",\"sex\":\"女\",\"tel\":\"10010\"},{\"id\":\"2010324264\",\"name\":\"張三\",\"cla\":\"10軟件\",\"sex\":\"男\(zhòng)",\"tel\":\"10086\"}]";
context.Response.Write(data);
這里我直接把json數(shù)據(jù)寫好格式了。一般來說是需要從數(shù)據(jù)庫把數(shù)據(jù)讀取出來然后拼湊成json格式,或者可以使用別人寫好的一些序列化成json數(shù)據(jù)的類,當然,我更建議你自己寫一個,生成一個類庫方便以后使用。
如果需要解釋一下json是什么,它是和xml等等一些數(shù)據(jù)并列的一種數(shù)據(jù)格式,形如:[{"id":"1","name":"張三","age":"20"},{"id":"2","name":"李四","age":"18"}]這樣的格式。
這應(yīng)該是每個web開發(fā)的人員都應(yīng)該掌握的基礎(chǔ)技術(shù)吧。
相關(guān)文章
jQuery實現(xiàn)點擊自身以外區(qū)域關(guān)閉彈出層功能完整示例【改進版】
這篇文章主要介紹了jQuery實現(xiàn)點擊自身以外區(qū)域關(guān)閉彈出層功能,結(jié)合具體實例形式分析了jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作實現(xiàn)彈出層打開與關(guān)閉相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
jQuery EasyUI常用數(shù)據(jù)驗證匯總
這篇文章主要為大家詳細匯總了jQuery EasyUI常用數(shù)據(jù)驗證,介紹了validatebox()提供的自定義驗證,感興趣的小伙伴們可以參考一下2016-09-09
jQuery實現(xiàn)Twitter的自動文字補齊特效
本文介紹了一款jQuery實現(xiàn)的文字自動補全特效的插件,該插件可以結(jié)合本地數(shù)據(jù)進行一些操作。推薦關(guān)注一下H5的幾種數(shù)據(jù)存儲的方式(localstorage與sessionstorage、IndexedDB、離線緩存manifest文件)2014-11-11

