Java全栈学习：JavaScript---JSON

最新推荐文章于 2024-04-29 06:16:28 发布

Listener-1379

最新推荐文章于 2024-04-29 06:16:28 发布

阅读量92

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45965358/article/details/114287233

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

一.概述
二.语法
三.与服务器交换数据
四.实例

一.概述

JSON：JavaScript Object Notation（JavaScript对象标记，简称JSON，一种数据交换格式）
JSON的作用：目前世界上90%的系统数据交换都采用JSON，

目前开发中有两种开发的数据格式：JSON和XML
JSON 具有体积小，易解析
XML具有体积大，不易解析，但是具有语法严精，常用在银行系统当中。

二.语法

数据是名称/值对
数据由逗号分隔
花括号保存对象
方括号保存数组

三.与服务器交换数据

JSON对象

{"firstName":"Bill", "lastName":"Gates"}

JSON数组

"employees":[
    {"firstName":"Bill", "lastName":"Gates"}, 
    {"firstName":"Steve", "lastName":"Jobs"}, 
    {"firstName":"Alan", "lastName":"Turing"}
]

该数组包含三个对象

相关函数
在这里插入图片描述

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

JSON 通常用于与服务端交换数据。

在向服务器发送数据时一般是字符串。

我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

四.实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style tupe = "text/css">
        table{
            width:50%;
            height:100px;
        }
        #css1{
           font-size:20px;
        }
    </style>
</head>
<body>
    <script type = "text/javascript">
        var data = {
            "total":"3",
            "student":[
                {"username":"zhangsan","age":18,"sal":"7000"},
                {"username":"lisi","age":19,"sal":"8000"},
                {"username":"wangwu","age":20,"sal":"9000"}
                ]
        };
        window.onload = function(){
            document.getElementById("button").onclick = function(){
                var html = "";
                var student = data.student;
                for(var i = 0;i<student.length;i++){
                    var stu = student[i];
                    html+="<tr>";
                    html+="<td>" + stu.username + "</td>";
                    html+="<td>" + stu.age + "</td>";
                    html+="<td>" + stu.sal + "</td>";
                    html+="</tr>";
                }
                document.getElementById("emptbody").innerHTML = html;
                document.getElementById("count").innerHTML = data.total;
            }
        }
    </script>
    <input type = "button" value = "显示员工信息" id = "button"/>
    <p id = "css1">员工信息列表</p>
    <hr/>
    <table  border = "1px" id = "emptbody">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>薪资</th>
        </tr>
    </table>
    总共<span id = "count">0</span>条记录
</body>
</html>

在这里插入图片描述

Listener-1379

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java全栈学习：JavaScript---JSON

文章目录一.概述二.语法三.与服务器交换数据四.实例一.概述JSON：JavaScript Object Notation（JavaScript对象标记，简称JSON，一种数据交换格式）JSON的作用：目前世界上90%的系统数据交换都采用JSON，目前开发中有两种开发的数据格式：JSON和XMLJSON 具有体积小，易解析XML具有体积大，不易解析，但是具有语法严精，常用在银行系统当中。二.语法数据是名称/值对数据由逗号分隔花括号保存对象方括号保存数组三.与服务器交换数据JSON对
复制链接

扫一扫

专栏目录