json数据格式

最新推荐文章于 2024-08-19 19:15:07 发布

BreakpointWorld

最新推荐文章于 2024-08-19 19:15:07 发布

阅读量467

点赞数 3

分类专栏：其他文章标签： json

本文链接：https://blog.csdn.net/BreakpointWorld/article/details/74989773

版权

其他专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前几天迫于作业的压力，接触了一下json这种数据格式去完成自己的代码，下面对使用的感受做一下总结。

{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" }, 
{ "name":"微博" , "url":"www.weibo.com" }
]
}

这是菜鸟教程上第一个json实例，直观分析一下，json是由对象，数组，键值对以及数据组成。由大括号包裹的是对象，一个对象里可以包含多个键值对，也可以包含多个数组，中括号包裹的是数组，一个数组里可以包含多个对象，也可以包含多个值（用英文逗号分开）。上面这个json实例就是一个对象，对象里包含一个键值对，键是sites，值是一个数组，数组里又包含三个对象，每个对象里又包含两个键值对。通过以上的分析可以发现，json数据格式是很灵活的。

json的值可以是数字（整数或浮点数），字符串（在双引号中），逻辑值（true 或 false），数组（在中括号中），对象（在大括号中），null

下面总结一下json数据格式的遍历与取值

course = [
    {
        "key" :"初级","value": [{"one": "java基础上", "two": "java基础下", "three": "初级项目"}]
    },
    {
        "key" :"中级","value": [{"one": "web前端技术", "two": "oracle数据库", "three": "web后端技术"}]
    },
    {
        "key" :"高级","value": [{"one": "java三大框架", "two": "高级项目", "three": "springMVC"}]
    }
]

上面是一个json实例，如果我想要取到“Java基础上”应该怎么取呢？首先分析一下上面这个例子最外层是数组包裹着对象，首先我们要取到第一个对象就是course[0]，然后就是取对象里键值对的值，course[0].value。course[0].value的含义就是[{"one": "java基础上", "two": "java基础下", "three": "初级项目"}]，然后接着再次取，发现又是数组，所以是course[0].value[0].one，这样就取到“Java基础上”这个值啦！

下面遍历一下这个json实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>
    阶段选择：
    <select id="stage" style="width: 150px" οnchange="changeStage()">
        <option>--选择所处阶段--</option>
    </select>
    课程选择：
    <select id="course" style="width: 150px">
        <option>--选择所学课程--</option>
    </select>
</p>
</body>
<script>

    var course = [
        {
            "key" :"初级","value": [{"one": "java基础上", "two": "java基础下", "three": "初级项目"}]
        },
        {
            "key" :"中级","value": [{"one": "web前端技术", "two": "oracle数据库", "three": "web后端技术"}]
        },
        {
            "key" :"高级","value": [{"one": "java三大框架", "two": "高级项目", "three": "springMVC"}]
        }
    ]

//    下拉列表
    function initStage() {
        var stageSel = document.getElementById("stage")
        for(var i=0;i<course.length;i++){
            stageSel.add(new Option(course[i].key,course[i].key),null)
        }
    }
    window.onload = initStage()//加载界面时执行该函数

    function changeStage() {
        var stageValue = document.getElementById("stage").value
        var courseSel = document.getElementById("course")
        courseSel.options.length = 0
        for(var i=0;i<course.length;i++){
            if(course[i].key == stageValue){
                for(var j in  course[i].value[0]){
                    courseSel.add(new Option(course[i].value[0][j],course[i].value[0][j]),null)
                }
            }
        }
    }

</script>
</html>