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

});

}