自從接觸了jquery就喜歡上了前端開(kāi)發(fā)，而且深深感受到了前端開(kāi)發(fā)的強(qiáng)大與重要之處。同時(shí)也想為asp.net鳴不平，事實(shí)上asp.net并沒(méi)有臃腫，說(shuō)它臃腫的人無(wú)非是那些不了解它的人，可能他們看見(jiàn)過(guò)一些asp.net低級(jí)程序員在不斷往頁(yè)面里拖控件，然后發(fā)現(xiàn)生成的頁(yè)面中含有大量的垃圾代碼，而且?guī)缀醢阉械倪壿嬏幚矶紝?xiě)在了服務(wù)器端，覺(jué)得服務(wù)器壓力太大了。事實(shí)上，剛?cè)腴Tasp.net的人會(huì)有拖控件的習(xí)慣，但是當(dāng)你再深入你會(huì)發(fā)現(xiàn)，最終asp.net的開(kāi)發(fā)模式還是跟PHP、jsp等其它web開(kāi)發(fā)模式是一樣的，PHP是html+css+js+PHP語(yǔ)言，asp.net是html+css+js+C#語(yǔ)言，唯一不同的只是服務(wù)器端語(yǔ)言而已（面向開(kāi)發(fā)人員來(lái)說(shuō)），如果看到這里還說(shuō)asp.net很臃腫，因?yàn)樾枰?net框架的支持，那么為什么不說(shuō)jsp很臃腫？jsp也需要java虛擬機(jī)的支持?。∷械膚eb開(kāi)發(fā)都是基于客戶端發(fā)請(qǐng)求-服務(wù)器端返回?cái)?shù)據(jù)-客戶端再處理數(shù)據(jù)這個(gè)模式，而且asp.net開(kāi)發(fā)模式的好處在于很好地分離了服務(wù)器端與客戶端的代碼，不用在html里嵌套服務(wù)器端的代碼——當(dāng)然這種模式現(xiàn)在已經(jīng)幾乎被各種web開(kāi)發(fā)采用了。

扯遠(yuǎn)了。我們今天要掌握的很少，我比較喜歡用很少的代碼來(lái)寫(xiě)demo，這樣大家比較容易掌握（內(nèi)容有點(diǎn)低級(jí)，大神請(qǐng)繞道）。

我們建一個(gè)這樣的web項(xiàng)目：

首先寫(xiě)客戶端的html代碼

<table>
  <thead>
    <tr>
      <td>學(xué)號(hào)</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>

然后寫(xiě)服務(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ù)寫(xiě)好格式了。一般來(lái)說(shuō)是需要從數(shù)據(jù)庫(kù)把數(shù)據(jù)讀取出來(lái)然后拼湊成json格式，或者可以使用別人寫(xiě)好的一些序列化成json數(shù)據(jù)的類，當(dāng)然，我更建議你自己寫(xiě)一個(gè)，生成一個(gè)類庫(kù)方便以后使用。

如果需要解釋一下json是什么，它是和xml等等一些數(shù)據(jù)并列的一種數(shù)據(jù)格式，形如：[{"id":"1","name":"張三","age":"20"},{"id":"2","name":"李四","age":"18"}]這樣的格式。

這應(yīng)該是每個(gè)web開(kāi)發(fā)的人員都應(yīng)該掌握的基礎(chǔ)技術(shù)吧。

最新評(píng)論