Thymeleaf #request和${param}对象的使用
参考资料
- Thymeleaf参考手册（二）：标准表达式语法（一）
目录
- 一. 前期准备
- 二. controller层
- 三. 前台HTML
- 四. 前台内联JS
-
- 4.1 #request.getParameterMap()
- 4.2 #request.getParameter(key)
- 4.3 ${param}对象
- 4.4 #request.getContextPath()
- 4.5 #request.getAttribute(key)
- 五. 全局变量对象
一. 前期准备
⏹配置文件
server:
servlet:
context-path: /jmw
⏹form
import lombok.Data;
import java.math.BigDecimal;
import java.util.Date;
import java.util.List;
@Data
public class Test16Form {
private String name;
private String sex;
private Date birthday;
private BigDecimal money;
private List<Test4Entity> tableList;
}
⏹进入页面的url
http://localhost:8080/jmw/test16/init?name=贾飞天&age=18
二. controller层
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
@Controller
@RequestMapping("/test16")
public class Test16Controller {
// 注入request对象
@Resource
private HttpServletRequest request;
@GetMapping("/init")
public ModelAndView init() {
// ⏹获取项目根路径
String contextPath = request.getContextPath();
System.out.println(contextPath); // /jmw
// ⏹将?key1=value1&key2=value2 转换为 map
Map<String, String[]> parameterMap = request.getParameterMap();
for (Map.Entry<String, String[]> entry : parameterMap.entrySet()) {
System.out.println(entry.getKey());
System.out.println(Arrays.toString(entry.getValue()));
}
/*
name
[贾飞天]
age
[18]
*/
// ⏹获取name参数所对应的value
String name = request.getParameter("name");
System.out.println(name); // 贾飞天
// 将map存入request的Attribute中
HashMap<String, String> map1 = new HashMap<>();
map1.put("address", "地球");
map1.put("hobby", "睡觉");
request.setAttribute("info", map1);
// 将entity存入request的Attribute中
Test16Form test16Form = new Test16Form();
test16Form.setName("贾飞天");
test16Form.setSex("男");
request.setAttribute("entity", test16Form);
// 返回到页面中
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("test16");
return modelAndView;
}
}
三. 前台HTML
⏹test16.html
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div>
<th:block th:if="not ${param.isEmpty()}">
<div>当前一共有[[${param.size()}]]个参数div>
<div>分别为: [[${param.name}]] 和 [[${param.age}]]div>
th:block>
div>
body>
html>
渲染之后
<div>当前一共有2个参数div>
<div>分别为: 贾飞天 和 18div>
四. 前台内联JS
以下所有的JS代码必须包裹在内联标签中
4.1 #request.getParameterMap()
⏹获取url传参的所有参数
const paramMap = [[${#request.getParameterMap()}]];
console.log(paramMap);
/*
{
"name": [
"贾飞天"
],
"age": [
"18"
]
}
*/
4.2 #request.getParameter(key)
⏹获取指定的参数
const paramName = [[${#request.getParameter('name')}]];
console.log(paramName); // 贾飞天
4.3 ${param}对象
⏹param是一个由Thymeleaf 提供的对象,用于存放url传参的所有参数
相当于#request.getParameterMap()，可以理解为简写形式
const param = [[${param}]];
console.log(param);
/*
{
"name": [
"贾飞天"
],
"age": [
"18"
]
}
*/
// 相当于 #request.getParameter('name')
const name = [[${param.name}]];
console.log(name); // 贾飞天
// 由于没有hobby,所以渲染完之后为 null,又因为 ?? 表达式,所以最后结果为 吃饭
const hobby = [[${param.hobby}]] ?? '吃饭';
console.log(hobby); // 吃饭
4.4 #request.getContextPath()
⏹获取设置的项目根路径
const contextPath1 = [[${#request.getContextPath()}]];
console.log(contextPath1); // /jmw
// #httpServletRequest和#request等效
const contextPath2 = [[${#httpServletRequest.getContextPath()}]];
console.log(contextPath2); // /jmw
4.5 #request.getAttribute(key)
⏹获取请求时，设置的Attribute值
const info = [[${#request.getAttribute('info')}]];
console.log(info);
// {address: "地球", hobby: "睡觉"}
const entity = [[${#request.getAttribute('entity')}]];
console.log(entity);
// {name: "贾飞天", sex: "男", birthday: null, money: null, tableList: null}
五. 全局变量对象
之前的做法，需要将变量先存入页面的隐藏域中，然后使用js获取隐藏域的值
<input type="hidden" id="name" th:value="${name}"/>
<script th:inline="javascript">
// 获取隐藏域中的值
const name = document.getElementById("name").value;
console.log(name); // 贾飞天
script>
现在可以这么做，直接将后台的数据封装为一个全局参数对象
<script th:inline="javascript">
// 可以把js用到的所有的全局数据封装为一个对象
const globalParam = {
name: [[${#request.getParameter('name')}]],
info: [[${#request.getAttribute('info')}]],
size: [[${param.size()}]],
hobby: [[${param.hobby}]] ?? '吃饭',
};
console.log(globalParam);
/*
{
"name": "贾飞天",
"info": {
"address": "地球",
"hobby": "睡觉"
},
"size": 2,
"hobby": "吃饭"
}
*/
script>