一、服務端資料格式

1.自定義po類

package com.hbut.ssm.po;

/**
 * pojo類
 *
 */
public class Children {

	private String name;
	private Integer age;
	private String gender;
	
	public Children(String name, Integer age, String gender) {
		super();
		this.name = name;
		this.age = age;
		this.gender = gender;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getAge() {
		return age;
	}
	public void setAge(Integer age) {
		this.age = age;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	
}
 

    //測試json的輸出
    @RequestMapping(value="/getChildrenList")
    public @ResponseBody List<Children> getChildrenList(HttpServletRequest request){
    	System.out.println("獲取前端的引數："+request.getParameter("name"));
    	List<Children> childrenList= new ArrayList<Children>();
    	childrenList.add(new Children("張三", 25, "男"));
    	childrenList.add(new Children("李四", 28, "男"));
    	childrenList.add(new Children("小紅", 22, "女"));
    	
    	return childrenList;
    }
 

方式1:不帶引數  $ajax(url，callback)，即第一個引數是請求的url，第二個引數是回撥用函式，json資料封裝在result，需要對result的json資料進行解析

	    $(document).ready(function(){
	    	$("button").click(function(){
	    		$.ajax({url:"http://localhost:8080/ssm01/getChildrenList.action",
	    			success:function(result){
	   		    //eval函式解析json資料
	    			var array=eval(result);
	    			var texts="解析json資料如下:<br>";
	    			for(var i=0;i<array.length;i++){
	    				texts+=array[i].name+"--"+array[i].age+"---"+array[i].gender+";<br>";
	    			}
	    			$("#div1").html(texts);
	    		}});
	    	});
	    });
 

方式2:帶引數  $.post(url，data,callback)，即第一個引數是請求的url，第二個引數是請求引數，第三個引數是回撥用函式，json資料封裝在result，需要對result的json資料進行解析

	    $(document).ready(function(){
	    	$("button").click(function(){
	    		$.post("http://localhost:8080/ssm01/getChildrenList.action",{
	    			name:"菜鳥教程",
	    			url:"http://www.runoob.com"
	    		},
	    		function(data,status){
	    		    //eval函式解析json資料
	    			var array=eval(data);
	    			var texts="解析json資料如下:<br>";
	    			for(var i=0;i<array.length;i++){
	    				texts+=array[i].name+"--"+array[i].age+"---"+array[i].gender+";<br>";
	    			}
	    			$("#div1").html(texts);
	    		});
	    	});
	    });

方式三:請求為json方式，請求的引數格式json，返回的是json（與上面請求url不一樣，原理類似）

//請求json，輸出是json
function requestJson(){
	
	$.ajax({
		type:'post',
		url:'${pageContext.request.contextPath }/requestJson.action',
		contentType:'application/json;charset=utf-8',
		//資料格式是json串，商品資訊
		data:'{"name":"手機","price":999}',
		success:function(data){//返回json結果
			alert(data);
		}
		
	});
	
	
}

//請求key/value，輸出是json
function responseJson(){
	
	$.ajax({
		type:'post',
		url:'${pageContext.request.contextPath }/responseJson.action',
		//請求是key/value這裡不需要指定contentType，因為預設就 是key/value型別
		//contentType:'application/json;charset=utf-8',
		//資料格式是json串，商品資訊
		data:'name=手機&price=999',
		success:function(data){//返回json結果
			alert(data.name);
		}
		
	});
	
}