Html使用Json

冷不防 2023-02-17 05:15 2阅读 0赞

**【前言】**  
前面咱们已经总结过，Java使用Json。  
[《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][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][Html_Json 1]![Html使用Json][Html_Json 2]  
![Html使用Json][Html_Json 3]![Html使用Json][Html_Json 4]  
![Html使用Json][Html_Json 5]

[Java_Json]: https://blog.51cto.com/13479739/2420512
[Html_Json]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA2LzA0LzM1MDdmNjllODM1ZTI5MzJjMTUxYjE2ZDU1ZWU2NjdkLnBuZw?x-oss-process=image/format,png
[Html_Json 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA2LzA0L2M0ZWNjYzA5ZmNkZGZhZGYzY2Q3NDYxNWYyMWZlYjc5LnBuZw?x-oss-process=image/format,png
[Html_Json 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA2LzA0Lzg2MTlkNjcwNTA3OGJkMWY5YjAxMjY0NmU2NmI5NGNiLnBuZw?x-oss-process=image/format,png
[Html_Json 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA2LzA0L2FiZWY0MzFlNjU0NDcwZGZlMmU0ZDVlYTI2ZGM4MTFmLnBuZw?x-oss-process=image/format,png
[Html_Json 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA2LzA0LzExYjAxMjhiMmUwNmQzZWY4NDBkMzVmNDBhMzg1YWQ1LnBuZw?x-oss-process=image/format,png
[Html_Json 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zNC41MWN0by5jb20vaW1hZ2VzL2Jsb2cvMjAyMDA2LzA0L2M1OGJlZjAyMmNkYmNlZjllOTkyZTlmNTg2ZGU4M2MwLnBuZw?x-oss-process=image/format,png