JQuery配合Ajax、JSON运用

2012-11-06

JQuery配合Ajax、JSON使用JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。 JSON 是 Jav

JQuery配合Ajax、JSON使用
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类型，或者修改JSONObjectpublic 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);    }})}

热点排行