springmvc环境下的ajax请求

前端发送数组

1、准备要发送的数组

  var array = [5,8,12];

2、将JSON数组转换为JSON字符串

  var arrayStr = JSON.stringfy(array);

3、发送Ajax请求

  $.ajax({

    "url":"send/array/plan/three.html"

    "type":"post",

    "data": arrayStr,                 //将json字符串作为请求题

    "contentType":"application/json;charset=UTF-8" //告诉服务器当前的请求体是json格式

  })

 

4、后端接收数据

@ResponseBody
@RequestMapping("/send/array/plan/three")
public String receiveArayPlanThree(@RequestBody Integer[] empIdArray){
        for(Integer empId : empIdArray){
             System.out.println(empId);        
      }      
        return "success";    
}

需要注意的点

1、前端

  首先准备好要发送的json数据

    json对象

    json数组

  将json对象或json数组转换成json字符串

    var = arrayStr = JSON.stringify(array);

  将json字符串直接赋值给data属性

    "data":arrayStr

  必须要设置contentType

    "contentType":"application/json;chatset=UTF-8"

2、后端

  加入jackson依赖

  开启注解驱动

  使用注解

    @RequestBody Integer[] empIdArray

 

<!-- Spring 进行 JSON 数据转换依赖 -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.8</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.8</version>
        </dependency>

 

发送复杂对象

1、准备要发送的json数据

var studeng = {
            "stuId":123,
            "stuName":"tom",
            "stuAge":22,
            "address":{
                "province":"guangdong"
                "city":"guangzhou",
                "street":"hello"
            },
            "schoolList":[
                {
                    "schoolName":"schoolOne",
                    "schoolSize":500
                }
            ],
            "scoreMap":{
                "english":100
            }
        };

2、将json数据转换为json字符串

var requestBody = JSON.stringify(student);

3、发送ajax请求

$.ajax({
            "url":"save/student.html",
            "type":"post",
            "data":requestBody,
            "contentType":"application/json;charset=UTF-8",
            "dataType":"text",
            "success":function (response) {
                alert(response)
            }
        })

4、后台接收

@ResponseBody
@RequestMapping("sava/student.html")
public String saveStudent(@RequestBody Student student){
       System.out.println(student.toString());
      return "success";
}    

小结

@RequestBody使用的场景:传统发送请求参数方式不方便发送的数据,使用json请求体的方式发送.特别是要发送复杂对象的时候.

 

对比 

 

统一返回数据格式

/**
 * @Description 对ajax请求返回的结果进行规范
 *
 * 统一整个项目中ajax请求返回的结果
 */
public class ResultEntity<T> {
    private static final String SUCCESS = "SUCCESS";
    private static final String FAILED = "FAILED";
    // 封装当前请求的处理结果是成功还是失败
    private String result;
    // 请求处理失败后的信息
    private String message;
    // 要返回的数据
    private T data;

    public ResultEntity(String result, String message, T data) {
        this.result = result;
        this.message = message;
        this.data = data;
    }

    public ResultEntity() {
    }

    public String getResult() {
        return result;
    }

    public void setResult(String result) {
        this.result = result;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    @Override
    public String toString() {
        return "ResultEntity{" +
                "result='" + result + '\'' +
                ", message='" + message + '\'' +
                ", data=" + data +
                '}';
    }

    public static <E> ResultEntity<E> successWithoutData() {
        return new ResultEntity<E>(SUCCESS,null,null);
    }
    public static <E> ResultEntity<E> sucessWithData(E data) {
        return new ResultEntity<E>(SUCCESS,null,data);
    }
    public static <E> ResultEntity<E> failed(String message) {
        return new ResultEntity<E>(FAILED,message,null  );
    }
}

 

posted @ 2020-07-19 11:25  Adom_ye  阅读(223)  评论(0编辑  收藏  举报