javaDEMO
Java 基础 Demo 站: https://www.javastudy.cloud
Java 中高级开发博客: https://www.lixiang.red
Java 学习公众号: java 技术大本营
前端发 ajax 请求
这块是 web 的基础,发 web 请求大概需要以下几步
1.引用 web 相关的依赖
2.前端页面引入 jquery.js
3.编写 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:请求后台的 url
type:标明是 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;
}
}
结果输出
DEMO 总评
ajax 请求是 web 开发中的第一步,我们可以按 Http 请求来理解他, 有相应的 header,有相关的各种 type , 其中最麻烦的是要和后端 Controller 的参数对应关系,稍不留神对应错了后端就收不了参数,或者值没法返回,要多看文档,注意默认值.
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于