Html5 Json应用
本文主要说明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>
Html5 Json应用的更多相关文章
- HTML5——JSON的方法实现对象copy
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言 ...
- html5 json的新用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车
localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = &q ...
- HTML5实现本地JSON文件的读写
参考: 使用HTML5来实现本地文件读取和写入 (FileReader读取json文件,FileSaver.js保存json文件) w3school <input>标签 FileRead ...
- HTML5开发——轻量级JSON存储解决方案Lawnchair.js
Lawnchair是一个轻量级的移动应用程序数据持久化存储方案,同时也是客户端JSON文档存储方法,优点是短小,语法简洁,扩展性比较好. 现在做HTML5移动应用除了LocalStorage的兼容性比 ...
- 转载 ----HTML5 ---js实现json方式提交数据到服务端
json提交给服务器我们在提交之前需要通过js的相关函数来把数据转换成json格式的数据再进行post或get了,下面来看看. 大概需求就是前端要把数据组装成json,传给后端.首先,在客户端,通 ...
- HTML5自学笔记[ 5 ]JSON的新方法
eval和JSON.parse的区别:eval:可以解析任何字符串为js:parse:只能解析JSON形式的字符串变为js(更安全). json格式的字符串中的属性名必须加双引号“”. stringi ...
- 基于HTML5的WebGL实现json和echarts图表展现在同一个界面
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
- 基于HTML5及WebGl下生成的json格式的工控SCADA风机叶轮旋转
突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...
随机推荐
- mysql学习之 sql语句的技巧及优化
一.sql中使用正则表达式 select name,email from user where email Regexp "@163[.,]com$"; sql语句中使用Regex ...
- 【.net 深呼吸】限制执行代码的权限
前面好几篇文章,老周都跟大伙伴们聊了跟应用程序域有关的话题,干脆咱们一聊到底吧,做学问就应该这样,有恒心. App Domain的创建新应用程序域的方法中,有一个特殊的重载: public stati ...
- bzoj1079--记忆化搜索
题目大意:有n个木块排成一行,从左到右依次编号为1~n.你有k种颜色的油漆,其中第i种颜色的油漆足够涂ci个木块.所有油漆刚好足够涂满所有木块,即c1+c2+...+ck=n.相邻两个木块涂相同色显得 ...
- PHP 设计模式概述
一.设计模式(Design pattern)是什么? 设计模式是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了可重用代码.让代码更容易被他人理解.保证代码可靠性. ...
- Android中实现APP文本内容的分享发送与接收方法简述
谨记(指定选择器Intent.createChooser()) 开始今天的内容前,先闲聊一下: (1)突然有一天头脑风暴,对很多问题有了新的看法和见解,迫不及待的想要分享给大家,文档已经写好了,我需要 ...
- XSS 前端防火墙 —— 整装待发
到目前为止,我们把能用前端脚本防御 XSS 的方案都列举了一遍. 尽管看起来似乎很复杂累赘,不过那些是理论探讨而已,在实际中未必要都实现.我们的目标只是为了预警,能发现问题就行,并非要做到滴水不漏的程 ...
- 周末聊聊IT人员的人脉观：关于帮妹子找兼职有感
背景: 前几天,有个认识了好几年的网友,现在是大学生,在厦门读大一,说和她同学要一起到广州找兼职,看我有没有介绍. 像我这么积极热心善良的人,就说帮她找找看,结果问了几次,没消息,只好诚实的回复人家, ...
- TFS 2015（Visual Studio Team Foundation Server）的下载和安装
微软现在所有Visual Studio相关的下载到www.visualstudio.com网站下载是非常方便的 下载地址: 下载ISO版本后,进行安装,由于10-20人的小团队,不需要SharePoi ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- 说说DOM的那些事儿
引子 先来一颗栗子: <img src="/sub/123.jpg" alt="test" /> <script type="tex ...