zoukankan      html  css  js  c++  java
  • [转载] Json

    我们建一个这样的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开发的人员都应该掌握的基础技术吧。

  • 相关阅读:
    Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???
    php 自动发送邮件的实现
    javascript 数组合并
    js 中调用 Object.prototype.toString()来检测对象的类型
    svn branching and merging
    mui 根据 json 数据动态创建列表
    mui 跨域请求
    angular2
    ionic2
    typescript
  • 原文地址:https://www.cnblogs.com/xkkk/p/5554721.html
Copyright © 2011-2022 走看看