（一）json格式（两种）
- 对象格式：{"key1":obj,"key2":obj,"key3":obj...}
- 数组/集合格式：[obj,obj,obj...]
（二）json格式书写练习
（1）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>json01</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<ul>
<li id="bj" name="beijing">北京</li>
</ul>
</body>
<script language="JavaScript">
/**
* 案例一
* {key:value,key:value}
*
* class Person{
* String firstname = "张";
* String lastname = "三丰";
* Integer age = 100;
* }
*
* Person p = new Person();
* System.out.println(p.firstname);
*/
//json对象
var person = {"firstname":"zhang","lastname":"sanfeng","age":"100"};
//取出lastname
alert(person.lastname);
//取出age
alert(person.age);
//发布，在浏览器地址输入http://localhost:8080/AjaxDemo/json/json01.html
</script>
</html>
（2）
<script language="JavaScript">
/**
* 案例二
* [{key:value,key:value},{key:value,key:value}]
*
*/
//数组，集合形式
var persons = [
{"firstname":"li","lastname":"si","age":"34"},
{"firstname":"wang","lastname":"wu","age":"24"}
];
//取出firstname=li
alert(persons[1].firstname);
//取34
alert(persons[0].age);
</script>（3）
<script language="JavaScript">
/**
* 案例三
* {
* "param":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
//对象格式，对象中value为一个数组，数组中又有多个对象，表现为数组格式与对象格式嵌套
var json = {
"baobao":[
{"name":"小双","age":"28"},
{"name":"建宁","age":"18"},
{"name":"阿珂","age":"24"}
]
//取name=建宁
alert(json.baobao[1].name);//对象.属性.属性
//取age=24
alert(json.baobao[2].age);
}
</script>（4）
<script language="JavaScript">
/**
* 案例四
* {
* "param1":[{key:value,key:value},{key:value,key:value}],
* "param2":[{key:value,key:value},{key:value,key:value}],
* "param3":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var json = {
"param1":[
{key1:value1,key2:value2}
{key3:value3,key4:value4}
],
"param1":[
{key5:value5,key6:value6}
{key7:value7,key8:value8}
],
};
//取value7
alert(json.param1[1].key7);
</script>（5）
<script language="JavaScript">
/**
* 案例五
* {
* "param1":"value1",
* "param2":{},
* "param3":[{key:value,key:value},{key:value,key:value}]
* }
*
*
*/
var json = {
"param1":"value1",
"param2":{"firstname":"sun","lastname":"myth"},
"param3":[
{key1:value1,key2:value2},
{key3:value3,key4:value4}
]
};
//對象導航
//取myth
alert(json.param2.lastname);
//取value3
alert(json.param3[1].key3);
</script>
（三）ajax前后端交互
（1）目录结构
（1）jquery_ajax.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 用的jQuery，记得导包
注意jQuery导入的路径写法
-->
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
/*//验证jQuery引入是否发生错误，用弹出框检验
$(function(){
alert();
});*/
function fn1(){
/*
jQuery.get(url, [data], [callback](回调函数), [type])
jQuery=$
[data],[callback],[type]都是可选的
*/
//get异步访问
//alert();
$.get(
"/AjaxDemo/ajaxServlet2",//url地址
{"name":"zhangsan","age":"24"},//请求参数
function(data){//执行成功后的回调函数，在此处将其写成匿名函数
//{\"name\":\"tom\",\"age\":\"26\"},既然字符串在此处被解析为json对象
//那么可以采用对象导航的方式取值，data即为该对象
//alert(data.name);
alert(data);//此处的data表示服务器端返回的数据
},//若后面不写回调函数，此处没有,号
//"text"//返回内容格式为text
"json" //返回内容data必须为json格式的字符串，否则报错（比如返回字符串"success..""）
//在回调函数中会将服务器返回的json字符串解析为json对象
);
}//若果用get提交方式传输中文数据，会出现乱码，可以进行先编码再解码的方法解决
//{"name":"张三","age":"24"},
function fn2(){
$.post(
"/AjaxDemo/ajaxServlet2",
{"name":"zhangsan","age":"24"},
function(data){
alert(data.age);
},
"json"
);
}
//jQuery方法进行post提交不用解决中文乱码问题，在jQuery内部已经进行了乱码处理
//既不用书写request.setCharacterEncoding("UTF-8");
</script>
</head>
<body>
<input type="button" value="get访问服务器" onclick="fn1()"/><span id="span1"></span>
<br/>
<input type="button" value="post访问服务器" onclick="fn2()"/><span id="span2"></span>
</body>
</html>(2)AjaxServlet.java
package com.shu.hj;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxServlet2
*/
public class AjaxServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name: "+name+" age: "+age);
//当前端页面数据提交过来后，服务器端需要返回信息
response.getWriter().write("success...");
//此时返回一个字符串"success..."，考虑一下前端如何接收
//在回调函数中接收
/*
如果返回格式要求为json，则服务器端Java代码只能返回一个json格式的字符串
{"name":"tom","age":"26"}
* */
//System.out.println("{"name":"tom","age":"26"}");
//以上直接将json格式字符串放入其中会报错，会发现花括号里外都是双引号
//如果将内部改为单引号System.out.println("{'name':'tom','age':'26'}");
//此时同样会报错，{'test': 1} （使用了单引号而不是双引号）会被识别为畸形json格式
System.out.println("{\"name\":\"tom\",\"age\":\"26\"}");//使用转义字符
注意：回调函数中的数据是用response.getWriter().write()传递的，不是System.out.println().
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
(3)web.xml
<servlet>
<description></description>
<display-name>AjaxServlet2</display-name>
<servlet-name>AjaxServlet2</servlet-name>
<servlet-class>com.shu.hj.AjaxServlet2</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet2</servlet-name>
<url-pattern>/ajaxServlet2</url-pattern>
</servlet-mapping>(2)结果
在浏览器中输入页面地址
(4)ajax提交
function fn3(){
$.ajax({
url:"/AjaxDemo/ajaxServlet2",
async:true,
type:"post",
data:{"name":"Stephen chow","age":"55"},
success:function(data){
alert(data.name);
},
error:function(){
alert("请求失败");
},
dataType:"json"
});
}
发现在AjaxServlet.java文件中：
使用了打印语句来打印，而不是使用response.getWriter().write()来返回服务端的数据