Html使用Json

最新推荐文章于 2024-04-03 10:02:39 发布

Thinking_Of_RedAnt

最新推荐文章于 2024-04-03 10:02:39 发布

阅读量2.1k

点赞数

分类专栏： html技术文章标签： html

本文链接：https://blog.csdn.net/qq_40687809/article/details/106718641

版权

html技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【前言】
前面咱们已经总结过，Java使用Json。
《Java使用Json》
下面我将继续学习，Html使用Json。
【先来一个小demo】

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery-1.11.0.min.js" ></script>
        <title>Json[js篇]</title>
    </head>
    <body>
        <span id="a"></span>
        <span id="b"></span>
        <span id="c"></span>
        <span id="d"></span>
    </body>
    <script type="application/javascript">
        var jsona = {
            "a":1,
            "b":2,
            "c":3,
            "d":4
        }
        $("#a").text(jsona.a);
        $("#b").text(jsona.b);
        $("#c").text(jsona.c);
        $("#d").text(jsona.d);
    </script>
</html>

Html使用Json

【JSON 对象】

    //Json对象
    var frozen = {
        "red":"Json",
        "ant":"对象"
    }

【JSON 数组】

    var redant = {
        "sites": [
            { "name":"小风" , "address":"天通苑" }, 
            { "name":"小明" , "address":"六里桥" }, 
            { "name":"小王" , "address":"星宫" }
        ],
        "unio":"我不知道要写点啥"
    }

【JSON.parse()】
JSON 通常用于与服务端交换数据。
在接收服务器数据时一般是字符串。
我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

【JSON.stringify()】
JSON 通常用于与服务端交换数据。
在向服务器发送数据时一般是字符串。
我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

【紧接着一个小demo】

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery-1.11.0.min.js" ></script>
        <title>Json[js篇]</title>
    </head>
    <body>
        <a onclick="jsonfro(1)">获取Json对象属性</a><br/>
        <a onclick="jsonfro(2)">获取Json数组属性</a><br/>
        <a onclick="jsonfro(3)">循环获取Json对象属性</a><br/>
        <a onclick="jsonfro(4)">循环获取Json数组属性</a><br/>
        <a onclick="jsonfro(5)">JSON.parse()处理服务端返回数据</a><br/>
        <a onclick="jsonfro(6)">JSON.stringify()处理发送到服务端的数据</a><br/>
        <div id="showarea" style="background-color: #CCCCCC; width:400px; height: 200px;"></div>
    </body>
    <script type="application/javascript">
        //Json对象
        var frozen = {
            "red":"Json",
            "ant":"对象"
        }
        var redant = {
            "sites": [
                { "name":"小风" , "address":"天" }, 
                { "name":"小明" , "address":"六" }, 
                { "name":"小王" , "address":"星" }
            ],
            "unio":"我不知道要写点啥"
        }

        function jsonfro(num){
            var test = "";
            switch (num){
                case 1:
                    test = frozen.red+"<br/>"+frozen.ant;

                    break;
                case 2:
                    test = redant.sites[0].name + redant.sites[0].address + "<br/>"
                    + redant.sites[2].name + redant.sites[2].address + "<br/>"
                    + redant.unio;
                    break;
                case 3:
                    //在 for-in 循环对象的属性时，使用中括号（[]）来访问属性的值：
                    for (x in redant) {
                            test += redant[x] + "<br>";
                    }
                    break;
                case 4:
                    for (i in redant.sites) {
                            test += redant.sites[i].name + "<br>";
                    }
                    break;
                case 5:
                    var text = '{ "name":"这里是服务端返回的数据", "initDate":"2013-12-14", "site":"呵呵"}';
                    var obj = JSON.parse(text);
                    test = obj.name + obj.initDate + obj.site;
                    break;
                case 6:
                    //json格式转为字符串发送到服务器端
                    var myJSON = JSON.stringify(redant);
                default:
                    break;
            }
            $("#showarea").html(test);
        }
    </script>
</html>

Html使用Json

Thinking_Of_RedAnt

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Html使用Json

【前言】前面咱们已经总结过，Java使用Json。《Java使用Json》下面我将继续学习，Html使用Json。【先来一个小demo】<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script type="text/javascript" ...
复制链接

扫一扫