JSON: JSON 用法
| ylbtech-JSON: JSON 用法 |
| 1. JSON Object creation in JavaScript返回顶部 |
<!DOCTYPE html>
<html>
<body>
<h2>JSON Object creation in JavaScript</h2>
<p>
Name:<span id="jname"></span><br />
Age:<span id="jage"></span><br />
Address:<span id="jaddress"></span><br />
Phone:<span id="jphone"></span><br />
</p>
<script>
var JSONObject = {
"name": "John Johnson",
"street": "Oslo West 555",
"age": 33,
"phone":"555 1234567"
};
document.getElementById("jname").innerHTML = JSONObject.name;
document.getElementById("jage").innerHTML = JSONObject.age;
document.getElementById("jaddress").innerHTML = JSONObject.street;
document.getElementById("jphone").innerHTML = JSONObject.phone;
</script>
</body>
</html>
JSON Object creation in JavaScript
Name:John Johnson
Age:33
Address:Oslo West 555
Phone:555 1234567
| 2. Create Object from JSON String返回顶部 |
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>First Name:<span id="fname"></span></p>
<script>
var employee = [
{ "firstName": "John", "lastName": "Doe" },
{ "firstName": "Anna", "lastName": "Smith" },
{ "firstName": "Peter", "lastName": "Jones" }
];
employee[1].firstName = "Jonatan";
document.getElementById("fname").innerHTML = employee[1].firstName;
</script>
</body>
</html>
Create Object from JSON String
First Name:Jonatan
| 3. 从 JSON 字符串中创建对象返回顶部 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>示例</title>
</head>
<body>
<h2>从 JSON 字符串中创建对象</h2>
<p>
名：<span id="fname"></span><br />
姓：<span id="lname"></span><br />
</p>
<script>
var txt = '{"employees":[' + '{"firstName":"John","lastName":"Doe"}'
+ ',{"firstName":"Anna","lastName":"Smith"}'
+ ',{"firstName":"Peter","lastName":"Jones"}]}'; var obj = eval("(" + txt + ")"); document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
</body>
</html>
从 JSON 字符串中创建对象
名：Anna
姓：Smith
| 4. JSONP 实例返回顶部 |
<!DOCTYPE html>
<html>
<head>
<title>JSONP 实例</title>
</head>
<body>
<div id="divCustomers"></div>
<script type="text/javascript">
function callbackFunction(result, methodName) {
var html = '<ul>';
for (var i = 0; i < result.length; i++) {
html += '<li>' + result[i] + '</li>';
}
html += "</ul>";
document.getElementById("divCustomers").innerHTML = html;
}
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
</body>
</html>
- customername1
- customername2
| 5. Create Object from JSON String返回顶部 |
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
名：<span id="fname"></span><br />
姓：<span id="lname"></span><br />
</p>
<script>
var txt = '{"employees":[' + '{"firstName":"John","lastName":"Doe"}'
+ ',{"firstName":"Anna","lastName":"Smith"}'
+ ',{"firstName":"Peter","lastName":"Jones"}]}'; var obj = JSON.parse(txt); document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
<script>
document.getElementById("fname").innerHTML = obj.employees[1].firstName;
document.getElementById("lname").innerHTML = obj.employees[1].lastName;
</script>
</body>
</html>
Create Object from JSON String
名：Anna
姓：Smith
3、
| 6. JSNP 实例返回顶部 |
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>JSNP 实例</title>
<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.js"></script>
</head>
<body>
<div id="divCustomers"></div>
<script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function (data) {
var html = '<ul>';
for(var i=0;i<data.length;i++)
{
html += '<li>' +data[i]+ '</li>';
}
html += "</ul>";
$('#divCustomers').html(html);
});
</script>
</body>
</html>
- customername1
- customername2
| 7.返回顶部 |
| 8.返回顶部 |
| 9.返回顶部 |
| 10.返回顶部 |
| 11.返回顶部 |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
JSON: JSON 用法的更多相关文章
- 再谈Newtonsoft.Json高级用法
上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...
- JSON基本用法
JSON基本用法 2016-08-10 16:42:19 JSON的全称是“JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语 ...
- Jquery之JSON的用法
今天讲了Jquery里面JSON的用法,下面是今天讲课给的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
- Newtonsoft.Json高级用法之枚举中文转义
最近看博客园中 焰尾迭的两篇关于"Newtonsoft.Json高级用法"的文章受到了很多人的评论,一度登入到头条推荐. 今天我就不再重复焰尾迭博文中的一些提过的Newtonsof ...
- 将php数组转js数组，js如何接收PHP数组，json的用法
首先下载下面这个文件(这是一段是别人写出来专门解析json的代码),然后引入这个文件! http://pan.baidu.com/s/1dD8qVr7 现在当我们需要用ajax与后台进行交互时,怎样将 ...
- $.ajax中contentType: “application/json” 的用法
不使用contentType: “application/json”则data可以是对象 $.ajax({ url: actionurl, type: "POST", datTyp ...
- 【c#技术】一篇文章搞掂：Newtonsoft.Json Json.Net
一.介绍 Json.Net是一个.Net高性能框架. 特点和好处: 1.为.Net对象和JSON之间的转换提供灵活的Json序列化器: 2.为阅读和书写JSON提供LINQ to JSON: 3.高性 ...
- Newtonsoft.Json(Json.Net)学习笔记
Newtonsoft.Json 在Vs2013中就有自带的: 下面是Json序列化和反序列化的简单封装: /// <summary> /// Json帮助类 /// </summar ...
- Newtonsoft.Json(Json.Net)学习笔记（转）
概述 Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库,通过Nuget获取.(查看原文) 下面是Json序列化和反序列化的简单封装: /// <summary&g ...
- JSON之Asp.net MVC C#对象转JSON，DataTable转JSON，List转JSON,JSON转List,JSON转C#对象
一.JSON解析与字符串化 JSON.stringify() 序列化对象.数组或原始值 语法:JSON.stringify(o,filter,indent) o,要转换成JSON的对象.数组或原始值 ...
随机推荐
- NodeJS类型定义方式
最近在学习nodejs,就是因为它比较轻便,并发量大,上手快.由于以前一直在做C#的后端,没有接触过javascript,所以还得慢慢学习之. nodejs所用的是javascript语言,它没有如C ...
- 保存 Mybatis打印的SQL日志到数据库
之前做项目,一般会有一张,用户操作记录的数据表,里面主要包括一些,用户请求的URL和请求参数,用以记录用户做过哪些事情.并没有以文件的形式来做记录,当然只适合于一些用户量特别少的系统. 而Mybati ...
- vue 设置代理后 后端获取不到登录的session处理方法
代理设置的 名称 必须是 远程后端的 项目名称 session才生效.
- C语言基础:二维数组 分类： iOS学习 c语言基础 2015-06-10 21:42 16人阅读 评论(0) 收藏
二维数组和一位数组类似. 定义: 数据类型 数组名[行][列]={{ },{ }....}; 定义时,一维(行)的长度可以省略,但是二维(列)的长度不可以省略.但是访问时,一定使用双下标. 二维数组的 ...
- Object -c基础知识(5)--release 之后 retainCount为何为1
在XCode中加入如下代码: UILabel *label=[UILabel alloc]; [label setText:@"TestLabel"]; NSLog(@" ...
- 第三课 操作系统开发之x86模拟环境搭建
前面我们讲解了主引导程序的加载过程,并且制作了虚拟软盘a.img,最终这个主引导程序也在机器中成功运行了,但是实际开发的时候,并不会如此简单,免不了调试过程,如果还像上一节中直接将软盘放到机器中去加载 ...
- linux fdisk tf卡分区操作解析说明
/***************************************************************************** * linux fdisk tf卡分区操作 ...
- Texas Instruments matrix-gui-2.0 hacking -- submenu.php
<?php /* * Copyright (C) 2011 Texas Instruments Incorporated - http://www.ti.com/ * * * Redistrib ...
- 任务三 简单程序测试及 GitHub Issues 的使用
我提交的Issue 我被提出的Issue 在使用Issue的过程中我发现提出的Issue不能指派任务人和问题类型,被提出的Issue可以. 碰到最多的问题是测试程序的过程中, 比如用户未按指定格式输入 ...
- Executor 框架详解
框架最核心的类是ThreadPoolExecutor,它是Java线程池的实现类,通过Executors工具类,可以创建3种类型的ThreadPoolExecutor: 首先附上ThreadPoolE ...