ajax的常见几种写法以及用法

一、服务端数据格式

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;
	}
	
}

2.controller接受数据 及 准备需要返回的数据

 //测试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;
    }

 

二、ajax请求并解析数据

方式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，（与上面请求url不一样，原理类似）

//请求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);
		}
		
	});
	
}