SpringBoot ajax get/post请求案例

 

本文主要是针对SpringBoot的ajax 请求、响应案例，配合适当注解，方便开发中使用，都是rest接口

$.ajax中contentType 和 dataType

contentType：设置你发送给服务器的格式

dataType：设置你收到服务器数据的格式，json/text

contentType 默认值：“application/x-www-form-urlencoded; charset=UTF-8”

JSON.stringify()：将js数据转换为json格式

目录

GET请求/响应

基本数据类型（以int为例）

包装类型参数绑定

自定义对象类型参数绑定

List参数绑定

Map参数绑定

数组类型参数绑定

POST请求/响应

基本类型参数

json模式直接绑定自定义对象类型

json模式直接绑定自定义复合对象类型

json模式绑定数组类型

json模式绑定多个对象

1）使用List获取

2）使用Map接收

代码地址

GET请求/响应

创建：DataGetRequestController

@RestController
public class DataGetRequestController {

}

基本数据类型（以int为例）

在controller中写一个int参数绑定的方法

    @GetMapping("/getInt")
    public int getInt(int id){
        return id;
    }

jquery的ajax请求

$("#getInt").click(function(){
    $.ajax({
        type: "get",
        url: "/getInt?id=1000",
        dataType: "text",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text
        //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8
        success: function(data){
            console.log(data)
            $("#getIntMsg").html(data)
        }
    });
});

包装类型参数绑定

在controller中写多个包装类型参数绑定的方法

    @GetMapping(value = "/getBox",produces = {"application/json;charset=utf-8"})
    public String getBox(String name,Integer id){
        return "name = " + name + " id = " + id;
    }

jquery的ajax请求

$("#getBox").click(function(){
    $.ajax({
        type: "get",//type:get type:post type:put type:delete
        url: "/getBox?id=1000&name=小王同学",
        dataType: "text",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text
        //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8
        success: function(data){
            console.log(data)
            $("#getBoxMsg").html(data)
        }
    });
});

自定义对象类型参数绑定

在controller中写自定义请求参数

    @GetMapping(value = "/getUser",produces = {"application/json;charset=utf-8"})
    public User getUser(User user){
        return user;
    }

jquery的ajax请求

$("#getUser").click(function(){
    $.ajax({
        type: "get",//type:get type:post type:put type:delete
        url: "/getUser?userName=小王同学&password=123456&id=10000",
        dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text
        //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8
        success: function(data){
            console.log(data)
            $("#getUserMsg").html("userName:"+data.userName+"password:"+data.password)
        }
    });
});

List参数绑定

在controller中写List 请求参数

    @GetMapping("/getIds")
    public List getIds(@RequestParam  List ids){
        return ids;
    }

jquery的ajax请求

$("#getIds").click(function(){
    $.ajax({
        type: "get",//type:get type:post type:put type:delete
        url: "/getIds?ids=1,2,3",
        dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text
        //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8
        success: function(data){
            console.log(data)
            $("#getIdsMsg").html(data[0]+","+data[1]+","+data[2])
        }
    });
});

Map参数绑定

controller中添加Map实体类参数

    @GetMapping(value = "/getMap",produces = {"application/json;charset=utf-8"})
    public Map getMap(@RequestParam Map map){
        return map;
    }

jquery中的ajax请求

$("#getMap").click(function(){
    $.ajax({
        type: "get",//type:get type:post type:put type:delete
        url: "/getMap?id=10&name=小王同学&salary=3000",
        dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text
        //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8
        success: function(data){
            console.log(data)
            $("#getMapMsg").html("id="+data.id+",name="+data.name+",salary="+data.salary)
        }
    });
});

数组类型参数绑定

controller增加数组请求参数

    @GetMapping("/getArr")
    public String[] getArr(String[] arr){
        return arr;
    }

jquery中的ajax请求

$.ajax({
    type: "get",//type:get type:post type:put type:delete
    url: "/getArr?arr=小王同学,滑雪,溜冰",
    dataType: "json",// 设置你收到服务器数据的格式，根据服务器返回类型填：json、text
    //contentType : 'application/json;charset=utf-8',//设置你发送给服务器的格式: application/json;charset=utf-8
    success: function(data){
        console.log(data)
        $("#getArrMsg").html(data[0])
    }
});

POST请求/响应

由于前后端分离以及前端的多样性，通常我们使用json数据格式进行参数/数据传递，说到json格式，就得先说一下@RequestBody，这个是使用Json模式进行参数绑定必不可少的一环

1、@RequestBody注解解析

1）@RequestBody注解的作用将json格式的数据转为java对象

2）@RequestBody常用其来处理application/json类型

3）@RequestBody接收的是一个json格式的字符串

基本类型参数

在controller中增加基本类型参数

    @PostMapping("/postInt")
    public Integer postInt(Integer id){
        return id;
    }

jquery的ajax请求

$.ajax({
    type: "post",
    url: "/postInt",
    data: {"id":1000},
    dataType: "json",
    success: function(data){
        console.log(data)
        $("#postIntMsg").html(data)
    }
});

json模式直接绑定自定义对象类型

在controller中增加自定义类型参数

    @PostMapping("/postUser")
    public User postUser(@RequestBody User user){
        return user;
    }

jquery的ajax请求

$.ajax({
    type: "post",
    url: "/postUser",
    data: JSON.stringify({"userName":"小黑","password":"123456"}),
    dataType: "json",
    contentType : 'application/json;charset=utf-8',
    success: function(data){
        console.log(data)
        $("#postUserMsg").html(data.userName+","+data.password)
    }
});

json模式直接绑定自定义复合对象类型

在OrderForm类中有Goods类

@Data
public class OrderForm {
    private String sn;
    private Goods goods;
}

@Data
public class Goods {
    private Long id;
    private String goodsName;
}

增加OrderForm的controller

    @PostMapping(value = "/postOrderForm",produces = {"application/json;charset=utf-8"})
    public OrderForm postOrderForm(@RequestBody OrderForm orderForm){
        return orderForm;
    }

jquery的ajax请求

$.ajax({
    type: "post",
    url: "/postOrderForm",
    data: JSON.stringify(
        {
            "sn":"123456789",
            "goods":{"id":10,"goodsName":"华为手机"}
        }
    ),
    dataType: "json",
    contentType : 'application/json;charset=utf-8',
    success: function(data){
        console.log(data)
        $("#postOrderFormMsg").html("sn:"+data.sn+",goodsName="+data.goods.goodsName)
    }
});

json模式绑定数组类型

在controller中增加List 参数

    @PostMapping("/postIds")
    public List postIds(@RequestBody List ids){
        return ids;
    }

jquery的ajax请求

$.ajax({
    type: "post",
    url: "/postIds",
    data: JSON.stringify([1,2,3,4,5]),
    dataType: "json",
    contentType : 'application/json;charset=utf-8',
    success: function(data){
        console.log(data)
        $("#postIdsMsg").html(data[0]+","+data[1])
    }
});

json模式绑定多个对象 1）使用List获取

    @PostMapping("/postUsers")
    public List postUsers(@RequestBody List users){
        return users;
    }

$.ajax({
    type: "post",
    url: "/postUsers",
    data: JSON.stringify(
        [
            {"userName":"admin","password":"123456"},
            {"userName":"manager","password":"manager"}
        ]),
    dataType: "json",
    contentType : 'application/json;charset=utf-8',
    success: function(data){
        console.log(data)
        $("#postUsersMsg").html(data[0].userName+","+data[1].userName)
    }
});

2）使用Map接收

    @PostMapping("/postMap")
    public Map postMap(@RequestBody Map map){
        return map;
    }

$.ajax({
    type: "post",
    url: "/postMap",
    data: JSON.stringify({"name":"小王同学","salary":5000,"age":20}),
    dataType: "json",
    contentType : 'application/json;charset=utf-8',
    success: function(data){
        console.log(data)
        $("#postMapMsg").html(data.name+","+data.salary+","+data.age)
    }
});

代码地址