下载APP 编程狮,随时随地学编程
返回 首页

JSON 教程

JSON 使用

JSON 使用

JSON经常应用到的场景是:在后台应用程序中将响应数据封装成JSON格式,传到前台页面之后,需要将JSON格式转换为JavaScript对象,然后在网页中使用该数据。

把 JSON 文本转换为 JavaScript 对象

JSON 最常见的用法之一,是从 web 服务器上读取 JSON 数据(作为文件或作为 HttpRequest),将 JSON 数据转换为 JavaScript 对象,然后在网页中使用该数据。

为了更简单地为您讲解,我们使用字符串作为输入进行演示(而不是文件)。


JSON 实例 - 来自字符串的对象

创建包含 JSON 语法的 JavaScript 字符串:

var txt = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

由于 JSON 语法是 JavaScript 语法的子集,JavaScript 函数 eval() 可用于将 JSON 文本转换为 JavaScript 对象。

eval() 函数使用的是 JavaScript 编译器,可解析 JSON 文本,然后生成 JavaScript 对象。必须把文本包围在括号中,这样才能避免语法错误:

var obj = eval ("(" + txt + ")");

在网页中使用 JavaScript 对象:

实例

<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>

<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>

尝试一下 »

JSON 解析器

lamp  eval() 函数可编译并执行任何 JavaScript 代码。这隐藏了一个潜在的安全问题。

使用 JSON 解析器将 JSON 转换为 JavaScript 对象是更安全的做法。JSON 解析器只能识别 JSON 文本,而不会编译脚本。

在浏览器中,这提供了原生的 JSON 支持,而且 JSON 解析器的速度更快。

较新的浏览器和最新的 ECMAScript (JavaScript) 标准中均包含了原生的对 JSON 的支持。

Web 浏览器支持 Web 软件支持
  • Firefox (Mozilla) 3.5
  • Internet Explorer 8
  • Chrome
  • Opera 10
  • Safari 4
  • jQuery
  • Yahoo UI
  • Prototype
  • Dojo
  • ECMAScript 1.5

尝试一下 »

对于较老的浏览器,可使用 JavaScript 库: https://github.com/douglascrockford/JSON-js

相关教程

ECMAScript

目录
关于 JSON

JSON 教程

JSON 教程导读
JSON 简介
JSON 语法
JSON 使用
JSONP 教程
JSON在线解析及格式化验证工具

JSON 基础

JSON 数据类型
JSON 对象
JSON 模式
JSON 与 XML 对比

json格式

JSON 基础结构
JSON 数据格式

JSON 示例

在PHP 中使用JSON
在 Perl 中使用 JSON
在 Python 中使用 JSON
在 Ruby 中使用 JSON
在 Java 中使用 JSON
JSON 与 Ajax

JSON解析

JSON 数据解析的方法
JSON 数据解析过程详解
一个JavaScript函数把URL参数解析成Json对象
JSON 元素的添加删除
JSON 数据解析的3种方式
JavaScript 解析Json字符串的性能比较分析代码
JavaScript解析json格式数据简单示例

JSON遍历

JSON数据遍历之for-in
Jquery 遍历Json的实现代码
JS遍历Json字符串
直接在JS里创建JSON数据然后遍历使用
JS循环遍历JSON数据的方法
js 遍历json返回的map内容示例代码

JSON调用

JSP+jquery使用ajax方式调用json的实现方法
jquery中的ajax方法怎样通过JSONP进行远程调用
jquery ajax jsonp跨域调用实例代码
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
json的键名为数字时的调用方式
php跨域调用json的例子
jquery中ajax调用json数据的使用说明
ASP.NET(AJAX+JSON)实现对象调用

JSON转换

JavaScript转换与解析JSON方法实例详解
将JavaScript的jQuery库中表单转化为JSON对象的方法
javascript中JSON对象与JSON字符串相互转换实例
JavaScript中字符串(string)转json的方法
JavaScript将XML转成JSON的方法
java与javascript之间json格式数据互转介绍
转义字符(\\\\\\\\)对JavaScript中JSON.parse的影响概述
JavaScript中json对象和string对象之间相互转化
javascript中将Object转换为String函数代码 (json str)
转换json格式的日期为Javascript对象的函数

JSON获取

AJAX跨域请求获取JSON数据
JS根据key值获取URL中的参数值
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
js获取json元素数量的方法
JSONP获取Twitter和Facebook文章数的具体步骤
js获取通过ajax返回的map型的JSONArray的方法
JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程
jQuery中使用Ajax获取JSON格式数据示例代码
JQuery 获取json数据$.getJSON方法的实例代码

JSON字符串

javascript中JSON对象与JSON字符串相互转换实例
JavaScript中字符串(string)转json的方法
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
使用JavaScript构建JSON格式字符串实现步骤
JavaScript 解析Json字符串的性能比较分析代码

JSON数组

javascript巧用eval函数组装表单输入项为json对象的方法
用javascript对一个json数组深度赋值示例
解析javascript 数组(以及json元素的添加删除)
js数组如何添加json数据
js/jquery解析json和数组格式的方法详解

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }