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实现了我的想法,代码一百多行,这么少的代码 ...
随机推荐
- JS 判断数据类型的三种方法
说到数据类型,我们先理一下JavaScript中常见的几种数据类型: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Functi ...
- ExtJS 4.2 组件介绍
目录 1. 介绍 1.1 说明 1.2 组件分类 1.3 组件名称 1.4 组件结构 2. 组件的创建方式 2.1 Ext.create()创建 2.2 xtype创建 1. 介绍 1.1 说明 Ex ...
- OpenSceneGraph in ActiveX by ActiveQt
OpenSceneGraph in ActiveX by ActiveQt eryar@163.com Abstract. Qt’s ActiveX and COM support allows Qt ...
- 23种设计模式--代理模式-Proxy
一.代理模式的介绍 代理模式我们脑袋里出现第一个词语就是代购,其实就是这样通过一个中间层这个中间成是属于什么都干什么都买得,俗称"百晓生",在平时得开发中我们经常会听到 ...
- 快速搭建springmvc+spring data jpa工程
一.前言 这里简单讲述一下如何快速使用springmvc和spring data jpa搭建后台开发工程,并提供了一个简单的demo作为参考. 二.创建maven工程 http://www.cnblo ...
- jQuery学习之路（2）-DOM操作
▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...
- 算法与数据结构(十四) 堆排序 (Swift 3.0版)
上篇博客主要讲了冒泡排序.插入排序.希尔排序以及选择排序.本篇博客就来讲一下堆排序(Heap Sort).看到堆排序这个名字我们就应该知道这种排序方式的特点,就是利用堆来讲我们的序列进行排序.&quo ...
- zookeeper源码分析之四服务端(单机)处理请求流程
上文: zookeeper源码分析之一服务端启动过程 中,我们介绍了zookeeper服务器的启动过程,其中单机是ZookeeperServer启动,集群使用QuorumPeer启动,那么这次我们分析 ...
- C#发送邮箱
之前自己从来没有做过发送邮箱的功能,前段时间项目需要,在找了很多帖子之后,终于实现了. 之后有整理了一下,写了一个类.直接给类传递信息,就可以发送了. 这里还需要说明的是,发送邮箱需要开通POP3/S ...
- js刷新页面方法大全
如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, ...