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

    });

}