JQuery配合Ajax、JSON使用

JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。 JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。
JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。具体细节参考http://www.json.org/json-zh.html
举个简单的例子：

function showJSON() {
var user =
{
"username":"andy",
"age":20,
"info": { "tel": "123456", "cellphone": "98765"},
"address":
[
{"city":"beijing","postcode":"222333"},
{"city":"newyork","postcode":"555666"}
]
}

alert(user.username);
alert(user.age);
alert(user.info.cellphone);
alert(user.address[0].city);
alert(user.address[0].postcode);
}


在使用JSON之前先从http://www.json.org/java/下载java文件
1、MAP使用
后台：

Map map = new HashMap();
map.put("name", "xj");
map.put("age", 24);
JSONObject json = new JSONObject(map);
response.getWriter().println(json);
response.getWriter().flush();


前台：

function query() {
$.ajax( {
url : "servlet/Hello",
global : false,
type : "POST",
data : ( {
Name : "xiongjin"
}),
dataType : "html",
success : function(data){
var temp = jQuery.parseJSON(data);
alert(temp.name+temp.age);
}
})
}


2、List
后台：

List list = new ArrayList();
Map map = new HashMap();
map.put("name", "xj");
map.put("age", 24);
Map map2 = new HashMap();
map2.put("name", "xj1");
map2.put("age", 241);

list.add(map);
list.add(map2);
JSONArray array = new JSONArray(list);
response.getWriter().println(array);
response.getWriter().flush();


前台：

function query() {
$.ajax( {
url : "servlet/Hello",
global : false,
type : "POST",
data : ( {
Name : "xiongjin"
}),
dataType : "html",
success : function(data){
var temp = jQuery.parseJSON(data);
for(var i =0;i<temp.length;i++){
alert(temp[i].name+temp[i].age);
}
}
})
}


3、bean
后台：

//注意bean必须是public类型，或者修改JSONObject
public class Person {
private String name;
private String age;

public Person(String name, String age) {
super();
this.name = name;
this.age = age;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getAge() {
return age;
}

public void setAge(String age) {
this.age = age;
}

}

Person per = new Person("熊劲","27");
JSONObject json = new JSONObject(per);
response.getWriter().println(json);
response.getWriter().flush();


前台：

function query() {
$.ajax( {
url : "servlet/Hello",
global : false,
type : "POST",
data : ( {
Name : "xiongjin"
}),
dataType : "html",
success : function(data){
var temp = jQuery.parseJSON(data);
alert(temp.name+temp.age);
}
})
}