json前端应用

2024-03-07 21:24:33

本文主要说明json的基本概念，和一个在Html中使用Json给元素赋值的小例子，属于基础性信息

什么是 JSON ？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解

* JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

相比 XML 的不同之处

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用

JSON 语法规则

JSON 语法是 JavaScript 对象表示法语法的子集。

数据在名称/值对中
数据由逗号分隔
花括号保存对象
方括号保存数组

JSON 值

JSON 值可以是：

数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null

JSON 文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

---------------------------------------------------------------------------------------------------------

在Html5中使用Json,将Json中的内容给元素赋值，其中涉及CSS样式，JavaScript脚本。具体如下图所示：

具体不多解释，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>The eightth page</title>
    <style type="text/css">
        #group
        {
            width:400px;
            padding:20px;
            margin:20px;
        }
        input
        {
            margin-left: 10px;
            height: 20px;
        }
        div
        {
            margin-top: 10px;
            height: 20px;
        }
        .t0
        {
            vertical-align: middle;
        }
        input[type="checkbox"]
        {
            vertical-align: middle;
        }
        input[type="radio"]
        {
            vertical-align: middle;
        }
        .t
        {
            height: 20px;
            width: 60px;
            line-height: 20px;
            display: block;
            float: left;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var txt = {
                "fname": "Alan",
                "fage": 20,
                "flove": ["song", "run", "jump"],
                "fplay": { "basketball": "basketball" },
                "fold": true,
                "fwife": null
            };
            var obj = eval(txt);
            //给文本框复制
            document.getElementById("fname").value = obj.fname;
            document.getElementById("fage").value = obj.fage;
            //给复选框复制
            var objLove = obj.flove;
            var objElements = document.getElementsByName("flove");
            for (var i = 0; i < objLove.length; i++) {
                for (var j = 0; j < objElements.length; j++) {
                    if (objLove[i] == objElements[j].value) {
                        objElements[j].checked = "checked";
                        break;
                    }
                }
            }
            //给单选框复制
            var objPlay = obj.fplay;
            var objPlayElements = document.getElementsByName("fplay");
            for (var i = 0; i < objPlayElements.length; i++) {
                if (objPlayElements[i].value == objPlay.basketball) {
                    objPlayElements[i].checked = "checked";
                    break;
                }
            }
            //给文本框复制
            var old = obj.fold;
            if (old) {
                document.getElementById("fold").value = "very old";
            } else {
                document.getElementById("fold").value = "no old";
            }
            if (obj.fwife == null) {
                document.getElementById("fwife").value = "No wife";
            } else {
                document.getElementById("fwife").value = obj.fwife.ToString();
            }
        }
    </script>
</head>
<body>
    <header>
        <h1>信息录入</h1>
    </header>
    <form name="myForm" id="myForm" action="#" method="post" >
    <fieldset id="group">
    <legend id="group1">Information</legend>
    <div>
        <label class="t"> Name:</label>
        <input type="text" id="fname" />
    </div>
    <div>
        <label class="t"> Age:</label><input type="number" id="fage" />
    </div>
    <div>
        <label class="t"> Love:</label>
        <input type="checkbox" id="chkSong" value="song" name="flove" />
        <label class="t0">Song</label>
        <input type="checkbox" id="chkRun" value="run" name="flove" />
        <label class="t0">Run</label>
        <input type="checkbox" id="chkJum" value="jump" name="flove" />
        <label class="t0">Jump</label></div>
    <div>
        <label class="t"> Play:</label>
        <input type="radio" id="rbFball" value="football" name="fplay" />
        <label class="t0"> FootBall </label>
        <input type="radio" id="tbBall" value="basketball" name="fplay" />
        <label class="t0">BasketBall</label>
    </div>
    <div>
        <label class="t"> Old:</label>
        <input type="text" id="fold" />
    </div>
    <div>
        <label class="t">Wife:</label>
        <input type="text" id="fwife" />
    </div>
    <div>
        <label class="t">DateTime:</label>
        <input type="date"  id="fdatetime" value="目前IE11还不支持datetime类型" />
    </div>
    <div>
        <label class="t">Color:</label>
        <input type="color"  id="fcolor" value="目前IE11还不支持color类型" />
    </div>
    <div>
        <label class="t">Car:</label>
        <input type="text"  id="Color1" list="cars" />
        <datalist id="cars">
            <option value="Bus" />
            <option value="Jeep" />
            <option value="Bench" />
            <option value="BaoMa" />
        </datalist>
    </div>
    <div>
    <input type="submit" value="Submit" id="fsubmit" />
    <input type="reset" value="Reset" id="freset" />
    </div>
    </fieldset>
    </form>
</body>
</html>

备注

早春呈水部张十八员外（其一）

【作者】韩愈【朝代】唐

天街小雨润如酥，草色遥看近却无。

最是一年春好处，绝胜烟柳满皇都。

码农公寓