日期:2014-05-16  浏览次数:20499 次

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类型,或者修改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);
		    }
		})
	}