熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

ajax請求json數據並用js解析

2013-11-15 12:06:59  來源: JSP教程 
這應該是每個web開發的人員都應該掌握的基礎技術需要的朋友可以參考下  

  自從接觸了jquery就喜歡上了前端開發而且深深感受到了前端開發的強大與重要之處同時也想為aspnet鳴不平事實上aspnet並 沒有臃腫說它臃腫的人無非是那些不了解它的人可能他們看見過一些aspnet低級程序員在不斷往頁面裡拖控件然後發現生成的頁面中含有大量的垃圾 代碼而且幾乎把所有的邏輯處理都寫在了服務器端覺得服務器壓力太大了事實上剛入門aspnet的人會有拖控件的習慣但是當你再深入你會發現 最終aspnet的開發模式還是跟PHPjsp等其它web開發模式是一樣的PHP是html+css+js+PHP語言aspnet是 html+css+js+C#語言唯一不同的只是服務器端語言而已(面向開發人員來說)如果看到這裡還說aspnet很臃腫因為需要net框架 的支持那麼為什麼不說jsp很臃腫?jsp也需要java虛擬機的支持啊!所有的web開發都是基於客戶端發請求服務器端返回數據客戶端再處理數據 這個模式而且aspnet開發模式的好處在於很好地分離了服務器端與客戶端的代碼不用在html裡嵌套服務器端的代碼——當然這種模式現在已經幾乎 被各種web開發采用了

  扯遠了我們今天要掌握的很少我比較喜歡用很少的代碼來寫demo這樣大家比較容易掌握(內容有點低級大神請繞道)

  我們建一個這樣的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="加載數據" />

  
js代碼

復制代碼 代碼如下:
$(function () {
    $("#btnget")click(function () {
        $ajax({
            type: "post"
            dataType: "json"
            url: "dataashx"
            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 {
        bordercollapse: collapse;
    }
    table td {
        textalign: center;
        border: px solid gray;
        padding: px px;
    }
</style>

  
然後寫服務器端返回json數據的代碼

復制代碼 代碼如下:
string data = "[{"id":"""name":"林宇""cla":"軟件""sex":"男" "tel":""}{"id":"""name":"李四""cla": "網絡""sex":"女""tel":""}{"id":"""name ":"張三""cla":"軟件""sex":"男""tel":""}]";
contextResponseWrite(data);

  
這裡我直接把json數據寫好格式了一般來說是需要從數據庫把數據讀取出來然後拼湊成json格式或者可以使用別人寫好的一些序列化成json數據的類當然我更建議你自己寫一個生成一個類庫方便以後使用

  如果需要解釋一下json是什麼它是和xml等等一些數據並列的一種數據格式形如[{"id":"""name":"張三""age":""}{"id":"""name":"李四""age":""}]這樣的格式

  這應該是每個web開發的人員都應該掌握的基礎技術吧


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20323.html
  • 上一篇文章:

  • 下一篇文章:
  • 推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.