JSON：javascript对象简谱

最新推荐文章于 2022-08-15 16:23:46 发布

禾子逸

最新推荐文章于 2022-08-15 16:23:46 发布

阅读量301

点赞数

分类专栏： JavaScript 文章标签： json javascript js

本文链接：https://blog.csdn.net/qq_43093129/article/details/116121407

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JSON： JavaScript Object Notation

1. eval()函数

可以将一段字符串当作一段js代码执行

<!-- eval()函数 -->
<body>
<script>
    // eval()函数将一段字符串当作一段js代码执行
    window.eval("var num = 100;");
    console.log(num);
</script>
</body>

2. JSON

轻量级的数据交换格式【小体积表示更多的数据】
数据交换：不同语言（如C和java）之间相互通信【交换数据】
javascript中JSON是作为对象的形式存在的，JSON是一个无类型的对象，直接用大括号“包起来”即可

3. 创建JSON对象

创建JSON对象格式：var jsonObj = { "属性名":属性值, "属性名":属性值, ... }，属性值可以是任意类型
注意：在js中，[] 是数组对象，{} 是JSON对象
引用JSON对象格式1：console.log(jsonObj.属性名);
引用JSON对象格式2：console.log(jsonObj["属性名"]);

4. JSON嵌套

JSON允许嵌套多个JSON对象作为子属性

<script>
    var address = {
        "city":"shanghai",
        "house":"null"
    };
    var student = {
        "name":"zhangsan",
        "age":12,
        "live":address  // 嵌套JSON对象
    };
    console.log(student.name + "住在" + student.live.city)
</script>

<script>
    // JSON也可以合并在一起
    var student = {
        "name":"zhangsan",
        "age":12,
        "live":{
            "city":"shanghai",
            "house":"null"
        }  // 嵌套JSON对象
    };
    console.log(student.name + "住在" + student.live.city)
</script>

5. java和javascript数据交换

java的JDBC连接数据库查询数据，将数据拼接为JSON字符串格式，再将JSON格式的字符串传给javascript，在javascript中将JSON格式的字符串转换成JSON对象，便可以从该JSON对象中读取数据，完成了对数据的交换

<!-- java 和 javascript 数据交换 -->
<body>
<script>
    // java传过来的是一个JSON格式的字符串
    var fromJavaStr = "{\"name\":\"zhangsan\",\"age\":12}";
    // javascript 通过eval()函数转换成JSON对象代码
    window.eval("var jsonObj = " + fromJavaStr);
    console.log(jsonObj.name);
</script>
</body>

6. 重点：java和javascript前后端数据交换实例

要求：有一个空列表table和一个空记录总条数total。现从java传过来一个字符串 fromJavaStr，点击显示数据按钮button，可以将其作为列表的数据主体动态显示出来

<body>
<script>
    // 从java传过来的字符串
    var fromJavaStr = "{\"total\":2,\"student\":[{\"name\":\"zhangsan\",\"age\":20},{\"name\":\"lisi\",\"age\":21}]}";
    window.onload = function (ev) {
        document.getElementById("showTable").onclick = function (ev2) {
            // 解析传过来的java字符串，并转换成JSON对象格式，解析出来的数据放入tbody中
            // 1. 转换JSON对象
            window.eval("var stu = " + fromJavaStr);
            // 2. 设置总记录条数
            document.getElementById("total_span").innerHTML = "总记录条数：" + stu.total;
            // 3. 拼接HTML，显示数据主体
            var stu_arr = stu.student;
            var html = "";
            for (var i = 0 ; i < stu_arr.length ; ++i){
                html += "<tr>";
                html += "<td>" + (i+1) + "</td>";
                html += "<td>" + stu_arr[i].name + "</td>";
                html += "<td>" + stu_arr[i].age + "</td>";
                html += "</tr>";
            }
            // 4. 将拼接好的html字符串放入tbody中
            document.getElementById("stu_tbody").innerHTML = html;
        }
    }
</script>
<input type="button" value="单击显示列表" id="showTable">
<!-- 创建列表 -->
<table border="1px" width="30%">
    <!-- 列表头部（第一行）-->
    <tr>
        <th>序号</th>
        <th>学生姓名</th>
        <th>学生年龄</th>
    </tr>
    <!-- 列表的数据主体 -->
    <tbody id="stu_tbody">
    <!--            <tr>
                    <td>1</td>
                    <td>zhangsan</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>lisi</td>
                    <td>30</td>
                </tr>-->
    </tbody>
</table>
<span id="total_span">总记录条数：0</span>
</body>

禾子逸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSON：javascript对象简谱

JSON： JavaScript Object Notation，js对象简谱1. eval()函数可以将一段字符串当作一段js代码执行<body><script> // eval()函数将一段字符串当作一段js代码执行 window.eval("var num = 100;"); console.log(num);</script></body>2. JSON轻量级的
复制链接

扫一扫