ylbtech-JSON: JSON 用法
1. JSON Object creation in JavaScript返回顶部
1、
<!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>
2、 运行结果

JSON Object creation in JavaScript

Name:John Johnson
Age:33
Address:Oslo West 555
Phone:555 1234567

3、
2. Create Object from JSON String返回顶部
1、
<!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>
2、运行结果

Create Object from JSON String

First Name:Jonatan

3、
3. 从 JSON 字符串中创建对象返回顶部
1、
<!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>
2、运行结果

从 JSON 字符串中创建对象

名:Anna
姓:Smith

3、
4. JSONP 实例返回顶部
1、
<!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>
2、运行结果
  • customername1
  • customername2
3、
5. Create Object from JSON String返回顶部
1、
<!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>
2、运行结果

Create Object from JSON String

名:Anna
姓:Smith

3、

6. JSNP 实例返回顶部
1、
<!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>
2、运行结果
  • customername1
  • customername2
3、
7.返回顶部
 
8.返回顶部
 
9.返回顶部
 
10.返回顶部
 
 
11.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

JSON: JSON 用法的更多相关文章

  1. 再谈Newtonsoft.Json高级用法

    上一篇Newtonsoft.Json高级用法发布以后收到挺多回复的,本篇将分享几点挺有用的知识点和最近项目中用到的一个新点进行说明,做为对上篇文章的补充. 阅读目录 动态改变属性序列化名称 枚举值序列 ...

  2. JSON基本用法

    JSON基本用法 2016-08-10 16:42:19   JSON的全称是“JavaScript Object Notation”,意思是JavaScript对象表示法,它是一种基于文本,独立于语 ...

  3. Jquery之JSON的用法

    今天讲了Jquery里面JSON的用法,下面是今天讲课给的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...

  4. Newtonsoft.Json高级用法之枚举中文转义

    最近看博客园中 焰尾迭的两篇关于"Newtonsoft.Json高级用法"的文章受到了很多人的评论,一度登入到头条推荐. 今天我就不再重复焰尾迭博文中的一些提过的Newtonsof ...

  5. 将php数组转js数组,js如何接收PHP数组,json的用法

    首先下载下面这个文件(这是一段是别人写出来专门解析json的代码),然后引入这个文件! http://pan.baidu.com/s/1dD8qVr7 现在当我们需要用ajax与后台进行交互时,怎样将 ...

  6. $.ajax中contentType: “application/json” 的用法

    不使用contentType: “application/json”则data可以是对象 $.ajax({ url: actionurl, type: "POST", datTyp ...

  7. 【c#技术】一篇文章搞掂:Newtonsoft.Json Json.Net

    一.介绍 Json.Net是一个.Net高性能框架. 特点和好处: 1.为.Net对象和JSON之间的转换提供灵活的Json序列化器: 2.为阅读和书写JSON提供LINQ to JSON: 3.高性 ...

  8. Newtonsoft.Json(Json.Net)学习笔记

    Newtonsoft.Json 在Vs2013中就有自带的: 下面是Json序列化和反序列化的简单封装: /// <summary> /// Json帮助类 /// </summar ...

  9. Newtonsoft.Json(Json.Net)学习笔记(转)

    概述 Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库,通过Nuget获取.(查看原文) 下面是Json序列化和反序列化的简单封装: /// <summary&g ...

  10. JSON之Asp.net MVC C#对象转JSON,DataTable转JSON,List转JSON,JSON转List,JSON转C#对象

    一.JSON解析与字符串化 JSON.stringify() 序列化对象.数组或原始值 语法:JSON.stringify(o,filter,indent) o,要转换成JSON的对象.数组或原始值 ...

随机推荐

  1. js图片切换 带左右控制的

    代码下载

  2. (C/C++学习笔记) 十二. 指针

    十二. 指针 ● 基本概念 位系统下为4字节(8位十六进制数),在64位系统下为8字节(16位十六进制数) 进制表示的, 内存地址不占用内存空间 指针本身是一种数据类型, 它可以指向int, char ...

  3. Python中字典的基本操作

    字典(Dictionary)是一映射类型(Key-value):字典是可变的,可存储任意类型对象 字典的定义用大括号{ },每个值用 ”,“ 逗号隔开,key和value使用 ”:“ 冒号分隔 字典的 ...

  4. Ubuntu 16.04 安装 PyCharm

    https://blog.csdn.net/zhuanshu666/article/details/73554885

  5. STM32中TIMx的映射及其通道

    TIMx,通道x,无映射,部分映射,完全映射    TIM1_CH1, PA8,    PE9,    TIM1_CH2, PA9,    PE11    TIM1_CH3, PA10,    PE1 ...

  6. mos如何工作参考地址

    https://wenku.baidu.com/view/c118c3fb360cba1aa811da9d.html?qq-pf-to=pcqq.c2c

  7. (dfs痕迹清理兄弟篇)bfs作用效果的后效性

    dfs通过递归将每种情景分割在不同的时空,但需要对每种情况对后续时空造成的痕迹进行清理(这是对全局变量而言的,对形式变量不需要清理(因为已经被分割在不同时空)) bfs由于不是利用递归则不能分割不同的 ...

  8. BZOJ2460,LG4570 [BJWC2011]元素

    题意 相传,在远古时期,位于西方大陆的 Magic Land 上,人们已经掌握了用魔法矿石炼制法杖的技术.那时人们就认识到,一个法杖的法力取决于使用的矿石. 一般地,矿石越多则法力越强,但物极必反:有 ...

  9. 关于springmvc 返回json数据null字段的显示问题-转https://blog.csdn.net/qq_23911069/article/details/62063450

    最近做项目(ssm框架)的时候,发现从后台返回的json(fastjson)数据对应不上实体类,从数据库查询的数据,如果对应的实体类的字段没有信息的话,json数据里面就不显示,这不是我想要的结果,准 ...

  10. ClickHouse 简单试用

    ClickHouse 具有强劲的数据分析能力,同时支持标准sql 查询,内置了好多聚合参数 同时可以方便的使用表函数连接不同的数据源(url,jdbc,文件目录...) 测试使用docker安装 参考 ...