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. (转)Secondary NameNode的作用

    在Hadoop中,有一些命名不好的模块,Secondary NameNode是其中之一.从它的名字上看,它给人的感觉就像是NameNode的备份.但它实际上却不是.很多Hadoop的初学者都很疑惑,S ...

  2. 软工实践团队项目-"智能聊天机器人"简介

    "智能聊天机器人"项目 目前已确定的团队人员:张扬.俊彦.韫月.地秀.泽波.李翔.文婧.俞明.加伟(排名不分先后) 队伍已满,没有再招人的打算(#^.^#) 我们的想法 你有用过智 ...

  3. 玩转X-CTR100 l 平台-4WD智能小车

    我造轮子,你造车,创客一起造起来!更多塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ] 本文介绍使用X-CTR100控制器搭建4WD智能 ...

  4. 深入理解Linux网络技术内幕——网络设备初始化

    概述    内核的初始化过程过程中,与网络相关的工作如下所示:     内核引导时执行start_kernel,start_kernel结束之前会调用rest_init,rest_init初始化内核线 ...

  5. ARM裸板开发：04_MMU 链接地址与运行地址不一致时，（SDRAM）初始化程序地址无关码问题的分析

    ARM裸板开发过程,程序的链接地址设置为为0x30000000,而前期的启动代码以及相关硬件的初始化代码需要在内部iRAM(steppingstone,起始地址0x0)的4K中运行.链接地址与运行地址 ...

  6. 微信小程序插件使用

    使用插件 小程序开发者可便捷地把插件添加到自己的小程序内,丰富小程序的服务.当用户在使用小程序时,将可以在小程序内使用插件提供的服务. 开放范围 所有小程序 接入流程 在小程序管理后台添加插件 小程序 ...

  7. paho.mqtt.embedded-c MQTTPacket transport.c hacking

    /******************************************************************************* * paho.mqtt.embedde ...

  8. python 正则表达式 提取网页中标签的中文

    转载请注明出处 http://www.cnblogs.com/pengwang52/. >>> p= re.compile(r'\<div class="commen ...

  9. 51Nod 1009：1009 数字1的数量 （思维）

    1009 数字1的数量  基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题  收藏  关注 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的 ...

  10. test20180921 手机信号

    题意 分析 我们用形如(l, r, v) 的三元组描述一个区间,这个区间中从l 到r 每隔v 有一个信号站. 考虑一次construct 操作,会添加一个新的区间,并可能将一个已经存在的区间分裂为两个 ...