一：

1.介绍

　　

2.嵌套

　　

3.json解析

　　

4.优缺点

　　

二：json功能程序测试

1.设计

　　

2.程序

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Insert title here</title>

 <script type="text/javascript">

     var jsonObject={"name":"tom",

                     "age":18,

                     "address":{

                         "city":"BJ",

                         "school":"BD"

                     },

                     "teaching":function(){

                         alert("java ajax");

                     }

     };

     alert(jsonObject.name);

     //嵌套

     alert(jsonObject.address.city);

     //json里包含函数属性

     jsonObject.teaching();

     //将字符串转为json对象

     var jsonStr="alert('hello ajax2')";

     eval(jsonStr);

     //

     var json="{'name':'bob'}";

     var testjson=eval("("+json+")");

     alert(testjson.name);

 </script>

 </head>

 <body>

 </body>

 </html>

三：大纲

　　

四：程序

1.andy.js

 {"person": {

   "name":"Andy Budd",

   "website":"http://andybudd.com/",

   "email":"andy@clearleft.com"

   }

 }

2..css

　　程序和前面的相同。

3.index.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

	@import url("clearleft.css");

</style>

<script type="text/javascript">

	window.onload=function(){

		var aNodes=document.getElementsByTagName("a");

		for(var i=0;i<aNodes.length;i++){

			aNodes[i].onclick=function(){

				var request=new XMLHttpRequest();

				var method="GET";

				var url=this.href;

				request.open(method,url);

				request.send(null);

				request.onreadystatechange=function(){

					if(request.readyState==4){

						if(request.status==200||request.status==304){

							//XML格式

							var result=request.responseText;      //需要修改成Text

							var jsonObject=eval("("+result+")");  //变成执行语句

							var name=jsonObject.person.name;

							var website=jsonObject.person.website;

							var email=jsonObject.person.email;

							//alert(name);

							//构建节点

							var aNode=document.createElement("a");

							aNode.appendChild(document.createTextNode(name));

							aNode.href="mailto:"+email;

							var h2Node=document.createElement("h2");

							h2Node.appendChild(aNode);

							var aNode2=document.createElement("a");

							aNode2.appendChild(document.createTextNode(website));

							aNode2.href=website;

							var detailsNode=document.getElementById("details");

							detailsNode.innerHTML="";                            // 在每次之前进行清空

							detailsNode.appendChild(h2Node);

							detailsNode.appendChild(aNode2);

						}

					}

				}

				return false;

			}

		}

	}

</script>

</head>

<body>

	<h1>People</h1>

	<ul>

		<li><a href="files/andy.js">Andy</a></li>

		<li><a href="files/richard.js">Richard</a></li>

		<li><a href="files/jeremy.js">Jeremy</a></li>

	</ul>

	<div id="details"></div>

</body>

</html>

　　

五：效果

　　执行的效果与前面的执行效果相同。

　　

004 Ajax中传输格式为JSON的更多相关文章

  1. 003 Ajax中传输格式为XML

    一: 1.优缺点 二:大纲 1.结构设计 三:程序 1.xml <?xml version="1.0" encoding="utf-8"?> < ...

  2. 002 Ajax中传输格式为HTML

    一: 1.介绍 返回的数据可以直接插入到需要的地方. 2.优缺点 二:程序大纲 1.结构 三:程序 1.css body { background: #ffb url("logo.png&q ...

  3. java中集合格式及json格式的特点和转换

    作者原创:转载请注明出处 今天在写代码,遇到一个难点,由于要调用webservice接口,返回的为一个list集合内容,从webservice调用接口返回的为一个string的io流, 在调用接口的地 ...

  4. ajax中设置contentType: “application/json”的作用

    最近在做项目交互的时候,刚开始向后台传递数据返回415,后来百度添加了 contentType:"application/json"之后返回400,然后把传输的数据格式改为json ...

  5. ajax 提交form格式 和 json格式

    json 格式 内容在body中 ajax设置   Content-Type: application/json 浏览器查看为 Request Payload The Request Payload ...

  6. ajax中后台string转json

    首先导入alibaba的fastJson包 后台: String thirdPage1=prop.getProperty("thirdPage1"); String thirdPa ...

  7. Ajax之处理不同格式的JSON数据

    JSON是一种网络中的数据格式,主要用于网络间的数据传输,它比XML格式的数据传输速度快,使用更广. 1.Ajax处理对象格式的JSON数据: <script src="../JS/j ...

  8. Ajax中的JSON格式与php传输过程的浅析

    在Ajax中的JSON格式与php传输过程中有哪些要注意的小地方呢? 先来看一下简单通用的JSON与php传输数据的代码 HTML文件: <input type="button&quo ...

  9. Ajax中XML和JSON格式的优劣比较

    刚做完一个小的使用Ajax的项目.整个小项目使用JavaScript做客户端,使用PHP做服务器端.利用xmlHttpRequest组件作为交互工具,利用XML作为数据传输的格式.做完后基本做一个简单 ...

随机推荐

  1. bzoj千题计划121：bzoj1033: [ZJOI2008]杀蚂蚁antbuster

    http://www.lydsy.com/JudgeOnline/problem.php?id=1033 经半个下午+一个晚上+半个晚上 的 昏天黑地调代码 最终成果: codevs.洛谷.tyvj上 ...

  2. select 的字段为空，给他显示默认值

    select 的字段为空,给他显示默认值: 解决办法一: select id,name,(case when level is null then 0 else level end) as a fro ...

  3. centos7 源码构建、安装dubbo-monitor

    按照官方文档 ,发现dubbo-monitor-simple-x.x.x-assembly.tar.gz  下载不下来(地址访问不了),那么就自己下载源码构建吧. 我的zookeeper,hadoop ...

  4. 【BZOJ】1828: [Usaco2010 Mar]balloc 农场分配（经典贪心）

    [算法]贪心+线段树 [题意]给定n个数字ci,m个区间[a,b](1<=a,b<=10^5),每个位置最多被ci个区间覆盖,求最多选择多少区间. 附加退化问题:全部ci=1,即求最多的不 ...

  5. 【leetcode 简单】 第九十九题 字符串相加

    给定两个字符串形式的非负整数 num1 和num2 ,计算它们的和. 注意: num1 和num2 的长度都小于 5100. num1 和num2 都只包含数字 0-9. num1 和num2 都不包 ...

  6. [转]边框回归(Bounding Box Regression)详解

    https://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Paper, ...

  7. 2016.07.15——istringstream测试

    istringstream测试 1.istringstream strcin(str),字符串(str)可以包括多个单词,单词之间使用空格分开 #include "stdafx.h" ...

  8. JavaScript入门--慕课网学习笔记

     JAVASCRIPT—(慕课网)入门篇 我们来看看如何写入JS代码?你只需一步操作,使用<script>标签在HTML网页中插入JavaScript代码.注意, <script&g ...

  9. 使用java8的StreamAPI对集合计算进行代码重构

    方法: 查询出所有部门成员中年龄大于30的员工姓名 部门对象: 员工对象: 模拟数据: private static List<Dept> list=new ArrayList<De ...

  10. vue表格中显示金额格式化与保存时格式化为数字并校验!

    最近项目中遇到了成本计算的,需要显示金额,保存一下,以后方便直接拿来用! 一 数字转金额格式显示 //数字转金额格式 format:function(s){ if(/[^0-9\.]/.test(s) ...