zoukankan      html  css  js  c++  java
  • Json 简易教程

    一、什么是Json

    JSON的全称是”JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语言的轻量级数据交换格式。XML也是一种数据交换格式,为什么没有选择XML呢?因为XML虽然可以作为跨平台的数据交换格式,但是在JS(JavaScript的简写)中处理XML非常不方便,同时XML标记比数据多,增加了交换产生的流量,而JSON没有附加的任何标记,在JS中可作为对象处理,所以我们更倾向于选择JSON来交换数据。这篇文章主要从以下几个方面来说明JSON。

    示例:

    <html>
    <body>
    <h2>在 JavaScript 中创建 JSON 对象</h2>
    
    <p>
    Name: <span id="jname"></span><br />
    Age: <span id="jage"></span><br />
    Address: <span id="jstreet"></span><br />
    Phone: <span id="jphone"></span><br />
    </p>
    
    <script type="text/javascript">
    var JSONObject= {
    "name":"Bill Gates",
    "street":"Fifth Avenue New York 666",
    "age":56,
    "phone":"555 1234567"};
    document.getElementById("jname").innerHTML=JSONObject.name
    document.getElementById("jage").innerHTML=JSONObject.age
    document.getElementById("jstreet").innerHTML=JSONObject.street
    document.getElementById("jphone").innerHTML=JSONObject.phone
    </script>
    
    </body>
    </html>

    运行结果:

    image

     

    二、JSON的两种结构

    JSON有两种表示结构,对象和数组。
    对象结构以”{”大括号开始,以”}”大括号结束。中间部分由0或多个以”,”分隔的”key(关键字)/value(值)”对构成,关键字和值之间以”:”分隔,语法结构如代码。

    {
        key1:value1,
        key2:value2,
        ...
    }

    其中关键字是字符串,而值可以是字符串,数值,true,false,null,对象或数组

    数组结构以”[”开始,”]”结束。中间由0或多个以”,”分隔的值列表组成,语法结构如代码。

    [
        {
            key1:value1,
            key2:value2 
        },
        {
             key3:value3,
             key4:value4   
        }
    ]

     

    三、在JS中如何使用Json

    JSON是JS的一个子集,所以可以在JS中轻松地读,写JSON。读和写JSON都有两种方法,分别是利用”.”操作符和“[key]”的方式。
    我们首先定义一个JSON对象,代码如下。

    var obj = {
                1: "value1",
                "2": "value2",
                count: 3,
                person: [ //数组结构JSON对象,可以嵌套使用
                            {
                             id: 1,
                             name: "张三"
                         },
                         {
                             id: 2,
                             name: "李四"
                         }
                       ],
                object: { //对象结构JSON对象
                      id: 1,
                    msg: "对象里的对象"    
                }
            };

     

    从JS中读取数据:

    function ReadJSON() {
        alert(obj.1); //会报语法错误,可以用alert(obj["1"]);说明数字最好不要做关键字
        alert(obj.2); //同上
    
        alert(obj.person[0].name); //或者alert(obj.person[0]["name"])
        alert(obj.object.msg); //或者alert(obj.object["msg"])
    }

     

    向JSON中写数据

    function Add() { 
        //往JSON对象中增加了一条记录
        obj.sex= "男" //或者obj["sex"]="男"
    }

     

    修改JSON中的数据

    function Update() {
         obj.count = 10; //或obj["count"]=10
    }

     

    删除JSON中的数据

    function Delete() {
        delete obj.count;
    }

     

    遍历JSON对象

    function Traversal() {
        for (var c in obj) {
            console.log(c + ":", obj[c]);
        }
    }

  • 相关阅读:
    程序员:不要自称为码农
    SpringBoot对静态资源配置
    LeetCode 572. Subtree of Another Tree(子树)
    LeetCode 437. Path Sum III(统计路径和等于sum的路径数量)
    LeetCode 112. Path Sum(判断路径和是否等于一个数)
    LeetCode 617. Merge Two Binary Trees(归并两棵二叉树)
    LeetCode 226. Invert Binary Tree(翻转二叉树)
    Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法
    linux-查询某软件的安装的目录
    WebService概念解释
  • 原文地址:https://www.cnblogs.com/zhengcheng/p/5416333.html
Copyright © 2011-2022 走看看