逆时光の对白

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::

JSON之原生JS使用

初学之章：http://www.w3school.com.cn/json/index.asp

JS实现JSON对象的三种方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    var jsonstr = '{"name":"Joky","age":21}';
    //直接拼接json对象
    var json1 = {
        "name" : "Joky",
        "age" : 21
    };
    //用eval脚本编译函数，在字符串两边加上括号，防止编译出错。
    var json2 = eval("(" + jsonstr + ")");

    //用json解析器
    var json3 = JSON.parse(jsonstr);

    function doi(id) {
        switch (id) {
        case '1':
            alert("name:" + json1.name + "<--1-->" + "age:" + json1.age);
            break;
        case '2':
            alert("name:" + json2.name + "<--2-->" + "age:" + json2.age);
            break;
        case '3':
            alert("name:" + json3.name + "<--3-->" + "age:" + json3.age);
            break;
        }

    }
</script>
</head>
<body>
    <button value="1" onclick="doi(this.value)">json1</button>
    <button value="2" onclick="doi(this.value)">json2</button>
    <button value="3" onclick="doi(this.value)">json3</button>
</body>
</html>


特点

使用与优点

语法

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    var json = {
        "string" : "Joky",
        "number" : 21,
        "list" : [ 1, 2, 3 ],
        "bool" : true,
        "object" : {},
        "nul" : null
    };

    function doi() {
        alert(json.string);
        alert(json.number);
        alert(json.list);
        alert(json.bool);
        alert(json.object);
        alert(json.nul);
    }
</script>
</head>
<body>
    <button onclick="doi()">遍历</button>
</body>
</html>

 

posted on 2016-02-18 11:45  逆时光の憧憬  阅读(237)  评论(0)    收藏  举报