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实现了我的想法,代码一百多行,这么少的代码 ...
随机推荐
- CodeSimth - .Net Framework Data Provider 可能没有安装。解决方法
今天想使用CodeSimth生成一个sqlite数据库的模板.当添加添加数据库的时候发现: .Net Framework Data Provider 可能没有安装. 下面找到官方的文档说明: SQLi ...
- 微软新神器-Power BI横空出世，一个简单易用，还用得起的BI产品，你还在等什么？？？
在当前互联网,由于大数据研究热潮,以及数据挖掘,机器学习等技术的改进,各种数据可视化图表层出不穷,如何让大数据生动呈现,也成了一个具有挑战性的可能,随之也出现了大量的商业化软件.今天就给大家介绍一款逆 ...
- 两个 viewports 的故事-第二部分
原文链接:A tale of two viewports — part two 译者:nzbin 在这个迷你系列中,我将解释 viewports 和各种重要元素的宽度是如何工作的,比如说 <ht ...
- windows+nginx+iis+redis+Task.MainForm构建分布式架构 之 (nginx+iis构建服务集群)
本次要分享的是利用windows+nginx+iis+redis+Task.MainForm组建分布式架构,由标题就能看出此内容不是一篇分享文章能说完的,所以我打算分几篇分享文章来讲解,一步一步实现分 ...
- nodejs项目mysql使用sequelize支持存储emoji
nodejs项目mysql使用sequelize支持存储emoji 本篇主要记录nodejs项目阿里云mysql如何支持存储emoji表情. 因由 最近项目遇到用户在文本输入emoji进行存储的时候导 ...
- vs2010静态链接MFC库报链接错误
由于需要将MFC程序在其它电脑上运行,所以需要将动态链接的MFC改成静态链接,本以为很简单,没想到链接的时候出现下面的链接错误: uafxcw.lib(afxmem.obj) : error LNK2 ...
- [干货来袭]C#6.0新特性
微软昨天发布了新的VS 2015 ..随之而来的还有很多很多东西... .NET新版本 ASP.NET新版本...等等..太多..实在没消化.. 分享一下也是昨天发布的新的C#6.0的部分新特性吧.. ...
- web 前端（轮番插件）
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- iOS 小知识点（持续更新）
1.如何通过代码设置Button title的字体大小 设置Button.titleLabel.font = [UIFont systemFontOfSize:<#(CGFloat)#> ...
- BPM公文管理解决方案分享
一.方案概述 公文作为一种规范性文书,具有法律性.指导性.政令性强的特点,是企事业单位政令上通下达的重要方式.及时.准确.安全地处理.控制和管理公文,方能保障企事业单位正常运转,确保组织权威和政令畅通 ...