[转载] Json

Posted 2020-07-19 午后的小巷

我们建一个这样的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: "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").empty(); //清空一下标签内容，防止数据重复显示
                $("tbody").append(str);
            }
        });
    });
});

为了使表格好看一些，我们定义一下它的样式

复制代码代码如下:

<style type="text/css">
    table {
        border-collapse: collapse;
    }
    table td {
        text-align: center;
        border: 1px solid gray;
        padding: 3px 10px;
    }
</style>

然后写服务器端返回json数据的代码

复制代码代码如下:

string data = "[{\\"id\\":\\"2010324268\\",\\"name\\":\\"林宇\\",\\"cla\\":\\"10软件\\",\\"sex\\":\\"男\\",\\"tel\\":\\"13800138000\\"},{\\"id\\":\\"2010324256\\",\\"name\\":\\"李四\\",\\"cla\\":\\"10网络\\",\\"sex\\":\\"女\\",\\"tel\\":\\"10010\\"},{\\"id\\":\\"2010324264\\",\\"name\\":\\"张三\\",\\"cla\\":\\"10软件\\",\\"sex\\":\\"男\\",\\"tel\\":\\"10086\\"}]";
context.Response.Write(data);

这里我直接把json数据写好格式了。一般来说是需要从数据库把数据读取出来然后拼凑成json格式，或者可以使用别人写好的一些序列化成json数据的类，当然，我更建议你自己写一个，生成一个类库方便以后使用。

 

如果需要解释一下json是什么，它是和xml等等一些数据并列的一种数据格式，形如：[{"id":"1","name":"张三","age":"20"},{"id":"2","name":"李四","age":"18"}]这样的格式。

这应该是每个web开发的人员都应该掌握的基础技术吧。