html5 物体 json,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脚本。具体如下图所示：

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

The eightth page

#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;

}

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();

}

}

信息录入

Information

Name:

Age:

Love:

Song

Run

Jump

Play:

FootBall

BasketBall

Old:

Wife:

DateTime:

Color:

Car:

HTML5——JSON的方法实现对象copy

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言 ...

html5 json的新用法

HTML5实现本地JSON文件的读写

参考: 使用HTML5来实现本地文件读取和写入  (FileReader读取json文件,FileSaver.js保存json文件) w3school 标签 FileRead ...

HTML5开发——轻量级JSON存储解决方案Lawnchair&period;js

Lawnchair是一个轻量级的移动应用程序数据持久化存储方案,同时也是客户端JSON文档存储方法,优点是短小,语法简洁,扩展性比较好. 现在做HTML5移动应用除了LocalStorage的兼容性比 ...

转载 ----HTML5 ---js实现json方式提交数据到服务端

json提交给服务器我们在提交之前需要通过js的相关函数来把数据转换成json格式的数据再进行post或get了,下面来看看.   大概需求就是前端要把数据组装成json,传给后端.首先,在客户端,通 ...

HTML5自学笔记&lbrack; 5 &rsqb;JSON的新方法

eval和JSON.parse的区别:eval:可以解析任何字符串为js:parse:只能解析JSON形式的字符串变为js(更安全). json格式的字符串中的属性名必须加双引号“”. stringi ...

基于HTML5的WebGL实现json和echarts图表展现在同一个界面

突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...

基于HTML5及WebGl下生成的json格式的工控SCADA风机叶轮旋转

突然有个想法,如果能把一些用到不同的知识点放到同一个界面上,并且放到一个盒子里,这样我如果要看什么东西就可以很直接显示出来,而且这个盒子一定要能打开.我用HT实现了我的想法,代码一百多行,这么少的代码 ...

随机推荐

北京电子科技学院(BESTI)实验报告3

北京电子科技学院(BESTI)实验报告3 课程: 信息安全系统设计基础 班级:1452.1453 姓名:(按贡献大小排名)周恩德 .郑凯杰 学号:(按贡献大小排名)20145217 .201453 指 ...

php for循环嵌套

一步完成 MySQL 向 Redis 迁移

从mysql搬一个大表到redis中,你会发现在提取.转换或是载入一行数据时,速度慢的让你难以忍受.这里我就要告诉一个让你解脱的小技巧.使用“管道输出”的方式把mysql命令行产生的内容直接传递给re ...

centos 格式化硬盘并挂载，添加重启后生效

[root@cloud /]# passwd 更改用户 root 的密码 . 新的 密码: 重新输入新的 密码: passwd: 所有的身份验证令牌已经成功更新. [root@cloud /]# fd ...

sed and awk学习笔记

sed and awk 背景 awk起源追溯至sed和grep,进而追溯至共同的行编辑器ed.实用工具grep来源于ed命令:g/re/p .实用工具awk和sed有一个共同的选项-f用于指定脚本的名 ...

132&period; Palindrome Partitioning II

题目: Given a string s, partition s such that every substring of the partition is a palindrome. Return ...

Java多线程编程(一)

1.Java创建多线程的方法一:(1)实现Runnable接口并实现其中的run()方法:(2)将Runable对象提交给一个Thread构造器,调用start()方法. [程序实例]单线程 publ ...

找到一个新的超好用的U盘启动制作工具了

有同事叫帮装电脑,弄个U盘说制作一个启动盘,结果一搜,出了“雨林木风”的主页. 太好用了,高手的产物,比以前找的方便一百倍.又简单,又实用,同步又下载好GHO文件.唯一 的问题是XP中用的GHO,好多 ...

C&plus;&plus; 初读迭代器

迭代器 这是个啥? string对象或vector对象可以通过下标访问每一个元素,迭代器也具有同样的效果.那又有什么不同呢?事实上并不是所有的容器到可以使用下标访问每一个元素,即在容器上迭代器更具普适 ...

Layouts

[Layouts] Each layout file must contain exactly one root element, which must be a View or ViewGroup ...