springboot|前端发ajax请求到后台Controller及常见的坑

最新推荐文章于 2023-04-27 15:02:23 发布

原创最新推荐文章于 2023-04-27 15:02:23 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#java

java 同时被 3 个专栏收录

49 篇文章

订阅专栏

spring boot

6 篇文章

订阅专栏

微服务

5 篇文章

订阅专栏

本文介绍了前端使用Ajax发送请求到SpringBoot后端Controller的基本步骤，包括引入web依赖、添加jQuery、编写Ajax请求和Controller接收。强调了Ajax的异步特性可能导致的问题，以及contentType和dataType的设置对请求和响应的影响。同时提醒开发者注意与后端参数对应关系的重要性。

前端发ajax请求

这块是web的基础,发web请求大概需要以下几步1.引用web相关的依赖2.前端页面引入jquery.js3.编写ajax请求4.编写对应的Controller

引入web相关的依赖

前端的模板选用的是thymeleaf

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'org.springframework.boot:spring-boot-starter-web'

引入jquery

jquery可以通过本地的方式引入,也可以通过cdn的方式引入本地引入:先下载jquery.js到static/js目录html页面head中添加:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.4.1.min.js"></script>
</head>

如果是CDN话,则不用下载jquery , 直接在head中引入

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>

编写ajax请求

参考文档
:https://api.jquery.com/jQuery.ajax/这里只展示一些常用的参数

$.ajax({
        url:'/test/testAjax1',
        type:'get',
        async:false,
        contentType:'application/json',
        dataType:'json',
        success:function (data) {
            console.log(data)
        }
    })

url:请求后台的urltype:标明是get还是post请求async:是异步的还是同步的,这里有个坑,有时候下拉框用ajax去请求数据,这里默认是异步的,结果数据还没回来,下拉框就开始渲染,然后发现下拉没有数据contentType: 前端的参数格式dataType:接口返回的数据的格式,一般来说,经常不写,让系统自己去判定这里ContentType的值一般来说有两种取值, 默认是
application/x-www-form-urlencoded; charset=UTF-8在实际开发中,经常会改成如上的application/json这里改了之后,Controller中也要对应着该入参方式,详情可参考这篇DEMO:springboot|Controller接收处理GET,POST请求入参
https://www.javastudy.cloud/articles/2019/11/03/1572752115551.html

Controller接收请求

/**
 * @Author https://www.javastudy.cloud
 * @CreateTime 2019/11/8
 **/
@RestController
public class TestController {
    @RequestMapping("test/testAjax1")
    public Map testAjax1(){
        Map<String,String> map = new HashMap<>();
        map.put("aaa","bbb");
        return map;
    }
    
}