SpringBoot ajax get/post请求案例

最新推荐文章于 2022-09-26 12:21:48 发布
最新推荐文章于 2022-09-26 12:21:48 发布
阅读量4.3k 收藏 26
点赞数 3
文章标签： ajax spring boot restful
转发请留下原链接哈，否则我会不开心的！！！
本文链接：https://blog.csdn.net/imjcoder/article/details/121232406
版权
本文详细介绍了如何在SpringBoot项目中使用Ajax进行GET和POST请求，包括不同类型参数（基本类型、包装类型、自定义对象、List、Map、数组）的绑定示例。涵盖`@RequestBody`在json模式中的应用，适合前后端分离开发人员参考。
摘要由CSDN通过智能技术生成
 

本文主要是针对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<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)
    }
});

代码地址

黑石课堂
关注
springboot配置ajax请求超时,使用Ajax请求SpringBoot接口引发的跨域惨案
weixin_26782929的博客
08-05 481
最近项目中引入了SpringBoot，目的是做到前后端分离开发。但实际过程中出现了很多问题，其中比较令人头疼的就是跨域问题。场景再现创建SpringBoot项目，引入Web、JPA和MySQL后台接口代码如下：@RequestMapping(value = "/l", method = RequestMethod.POST)@ResponseBodypublic List add(List lis...
springboot ajax请求数据
Befearless
11-20 8652
springboot ajax请求数据
通过Ajax和SpringBoot交互的示例
weixin_33889245的博客
05-14 187
转自：https://blog.csdn.net/oppo5630/article/details/52093898/ 转载于:https://www.cnblogs.com/sharpest/p/9034666.html
SpringBoot+安全框架+前后端处理ajax请求
ohsoa的博客
09-26 735
前后端处理json数据
springboot+ajax例子
10-21
使用`$.ajax()`、`$.get()`或`$.post()`方法可以轻松发起Ajax请求。例如，`$.getJSON()`可用于发送GET请求并处理JSON响应。 **7. 实例分析** 在提供的"SpringBootAjaxA"文件夹中，可能包含了SpringBoot项目和一个...
springboot023基于Springboot学生宿舍管理系统毕业源码案例设计.zip
最新发布
02-24
同时，`@RequestMapping`注解用于定义URL映射，`@GetMapping`、`@PostMapping`等用于处理GET和POST请求。在`StudentController`或类似的类中，可以看到这些处理用户请求的方法。 数据库方面，SpringBoot集成了...
SpringBoot前端网页上传文件案例
02-05
前端代码会创建一个FormData对象，然后将文件添加到其中，最后通过Ajax发送请求。在Spring Boot后端，我们需要配置`@PostMapping`的`consumes = MediaType.MULTIPART_FORM_DATA_VALUE`，以处理多部分数据。 前端...
SpringBoot 文件上传案例
01-06
在前端界面，使用HTML5的`<input type="file">`标签让用户选择文件，通过AJAX或Fetch API发送POST请求到服务器。记得设置`enctype="multipart/form-data"`，以支持多部分表单数据的提交。 最后，为了测试和验证文件...
springboot+ajax示例
08-02
springboot+ajax的小例子，适合初学者，可以参考博文http://blog.csdn.net/oppo5630/article/details/52093898
SpringBoot自定义错误信息，SpringBoot适配Ajax请求
04-27
NULL 博文链接：https://fanshuyao.iteye.com/blog/2414865
发送GET请求 示例
Monster_WangXiaotu的博客
11-26 785
/** * 发送GET请求 * @param url 请求地址 * @param param 请求参数 * @param headers * @return */ private String requestByGet(String url,Map<String, String> param,HttpHeaders headers){ //header填充 HttpEntity<MultiValueMap<String,Object>> request = new Htt
【Ajax 在SpringBoot中的使用 】
qq_44682003的博客
03-08 3643
Ajax 中文官网：https://jquery.cuishifeng.cn/jQuery.Ajax.html Ajax1、什么是ajax2、异步的好处3、Ajax在SpringBoot中的使用4、Json 使用5、无参数返回字符串的ajax请求6、无参数返回json类型的ajax请求7、有参数返回json类型的ajax请求1. 少量参数处理方案2、大量参数处理方案 1、什么是ajax AJAX即Asynchronous JavaScript and XML（异步JavaScript和XML），是实现客
2.AJAX GET请求案例
Docrymoon的博客
08-13 413
2、 AJAX GET 请求案例 ajax基本使用准备代码如下： 2.1 前端代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
ajax发送post请求传输数据给springboot接收+代码示例（整理趟过的坑，让你一次搞定）
一颗剽悍的种子的博客
04-29 3016
ajax发送post请求传输数据给springboot接收，其实就解决两个问题：一个是发送和一个接收的问题：所以就确保以下两点就好了。 注意确保以下两点就ok： 前端：1.确保ajax发送数据的是JSON格式，最好验证一下： typeof(res) === "object" 后端：2.确保前端发送的给后端接收的json格式数据对应你的entiy实体类。（因为我这里我实现的功能是插入对应数据，所以写...
AJAX发送get请求小案例
weixin_43299461的博客
12-22 1361
下面是一个利用JavaScriptt程序的AJAX发送的一个get请求案例； 首先要准备这几样东西： 网页代码` &amp;lt;%@ page language=“java” import=“java.util.*” pageEncoding=“utf-8”%&amp;gt; &amp;lt;% String path = request.getContextPath(); String basePath = req...
springboot中异步请求中的ajax
m0_51113232的博客
06-14 175
springboot中异步请求中的ajax
springboot ajax form json 请求方式
彻底拆分，一切可控！
10-11 3980
1.form请求的后台代码 1.定义实体 Student package com.bsx.test.entity; import com.bsx.test.constant.Gender; import com.bsx.test.constant.Nature; import javax.persistence.Column; import javax.persistence.Id; impo...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑石课堂

请给我打钱！！！谢谢，不客气！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值