JavaScript 读取 JSON 文本转换为对象

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


txt.json

var txt = '{ "employees" : [' + '{ "firstName":"Bill" , "lastName":"Gates" },'
+ '{ "firstName":"George" , "lastName":"Bush" },'
+ '{ "firstName":"Thomas" , "lastName":"Carter" } ]}';

json.html

<html>
<body>
<h2>
通过 JSON 字符串来创建对象
</h2>
<p>
First Name:
<span id="fname"></span>
<br />
Last Name:
<span id="lname"></span>
<br />
</p>
<script type="text/javascript" src="txt.json"></script>
<script type="text/javascript">
obj = JSON.parse(txt);
     document.getElementById("fname").innerHTML = obj.employees[1].firstName
document.getElementById("lname").innerHTML = obj.employees[1].lastName
</script>
</body>
</html>

或者:

var obj = str.parseJSON();

结果显示:

简单使用JSON,JavaScript读取JSON文本(三)的更多相关文章

  1. js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可)

    js进阶ajax读取json数据(ajax读取json和读取普通文本,和获取服务器返回数据(链接)都是一样的,在url处放上json文件的地址即可) 一.总结 ajax读取json和读取普通文本,和获 ...

  2. jquery简单ajax示例_读取json文件数据

    来自于<jquery权威指南> -------------------------------------- 点击button后,获取到json文件数据,显示如下: Json文件: [ { ...

  3. json数据的格式,JavaScript、jQuery读取json数据

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON的特点: JSON 是纯文本 JSON 具有“自我描述性”(人类可读) JSON 具有层级 ...

  4. python读取json文件制作股票价格走势

  5. js读取json数据(php传值给js)

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  6. Jackson将json string转为Object,org.json读取json数组

    从json文件读取json string或者自定义json string,将其转为object.下面采用的object为map,根据map读取json的某个数据,可以读取第一级的数据name,后来发现 ...

  7. JSON字符串与JSON对象

    JSON对象是直接可以使用JQuery操作的格式,和js中的对象一样,可以用对象(类名)点出属性(方法). JSON字符串仅仅只是一个字符串,一个整体,不截取的话没办法取出其中存储的数据,不能直接使用 ...

  8. json.dumps、json.dump、json.loads、json.load的区别

    json 模块提供了一种很简单的方式来编码和解码JSON数据. 其中两个主要的函数是 json.dumps() 和 json.loads() 下面是如何将Python数据结构转换为json impor ...

  9. 简单使用JSON,JavaScript中创建 JSON 对象(一)

    JSON:JavaScript 对象表示法(JavaScript Object Notation). JSON 是存储和交换文本信息的语法.类似 XML. JSON 比 XML 更小.更快,更易解析. ...

随机推荐

  1. 熊猫猪新系统測试之三:iOS 8.0.2

    本来本猫要等到8.1版本号出来后再做測试的,结果等来等去就是迟迟不推送更新呀!说好10月20号的iOS 8.1呢?为了一鼓作气写完,就先不等了.先拿手头的iOS 8.0.2系统做一下測试吧! 8.x系 ...

  2. Introducing Visual Studio’s Emulator for Android

    visual studio 2015支持Android开发了. Microsoft released Visual Studio 2015 Preview this week and with it ...

  3. API帮助页面

    ASP.NET Web API 2:创建API帮助页面        当你新建了一个web API服务之后,再建一个API帮助页面是很有好处的,这样其他开发人员就会很清楚地知道如何调用你的API接口. ...

  4. CII-原子

    <atom.h> #ifndef ATOM_INCLUDED #define ATOM_INCLUDED extern int Atom_length(const char *str); ...

  5. leetcode -day31 Subsets I II

    1.  Subsets Given a set of distinct integers, S, return all possible subsets. Note: Elements in a ...

  6. 一步一步写算法(之prim算法 下)

    原文:一步一步写算法(之prim算法 下) [ 声明:版权所有,欢迎转载,请勿用于商业用途.  联系信箱:feixiaoxing @163.com] 前两篇博客我们讨论了prim最小生成树的算法,熟悉 ...

  7. jmeter之GUI运行原理

    一.一语道破jmeter       大家都知道我们在应用jmeter的图形化界面来进行操作,保存后生成的是一个.jmx文件.     那么这个.jmx文件中都是些什么呢.   <?xml ve ...

  8. 表单元素的外观改变(webkit and IE10)

    1.禁止表单默认外观: input,select{ -webkit-appearance:none; appearance:none; }2.伪元素改变ie10表单元素默认外观 select::-ms ...

  9. 查看oracle数据库服务器的名字

    原文:查看oracle数据库服务器的名字 windows 中 1. select name from v$database ; 直接运行就可以查看了, 2.查看tnsnames.ora 的连接,有个S ...

  10. Django查询的琐碎记录

    我的需求是这样的,获取指定用户的获“赞”总数. 用户 models.py class UserProfile(models.Model): user = models.OneToOneField(Us ...