繁依Fanyi0

这个屌丝很懒，什么也没留下！

热门标签

SpringBoot ajax get/post请求案例_springboot ajax post接口

作者：繁依Fanyi0 | 2024-05-31 11:56:26

踩

springboot ajax 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请求/响应

创建：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<Integer> 请求参数


    @GetMapping("/getIds")
    public List<Long> getIds(@RequestParam  List<Long> 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<String,Object> getMap(@RequestParam Map<String,Object> 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<Integer> 参数


    @PostMapping("/postIds")
    public List<Integer> postIds(@RequestBody List<Integer> 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<E>获取


    @PostMapping("/postUsers")
    public List<User> postUsers(@RequestBody List<User> 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<String,Object>接收


    @PostMapping("/postMap")
    public Map<String,Object> postMap(@RequestBody Map<String,Object> 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)
    }
});

代码地址

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/652181