JS获取后台Model传值(使用Thymeleaf)

在Html中引用Thymeleaf:

首先在头部<html>标签中引入Thymeleaf:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

引入之后就可以使用嘞,在下面<body>标签中加入一个隐藏域:

<body>
<input id="labelUrl" type="hidden" th:value="${label}" />
...
</body>

${label} 就是后台Model保存的值,这个值使用thymeleaf放到了这个节点的value中。

在JS中获得这个值:

用 jQuery 的话可以直接获取值:

var data = $("#labelUrl").val();

如果是 纯JS 的话也可以直接获得节点的值:

var data = document.getElementId("labelUrl").value;

之后就可以随意使用嘞。

后台Controller保存值:

后台使用Model储存键值对即可:

    /**
     * 跳转到label页面
     * @return 目标页面
     */
    @GetMapping("/label")
    public String label(Model model, HttpServletRequest request) {
        model.addAttribute("label", request.getParameter("label"));

        return "label";
    }

request.getParameter("label"));是前端传过来的,获取值后用Model保存,并跳到另一个页面。
在那个页面中,用上述方法就可以取到值了。

另附:如果不用Model的方法:

其实也可以来拼接Url来实现传值的目的,这样的话后端只需要负责跳转即可:

    /**
     * 跳转到label页面
     * @return 目标页面
     */
    @GetMapping("/label/{label}")
    public String label() {
        return "label";
    }

只不过前端可能麻烦点,第一个页面要将值拼到url后面
之后第二个页面获取的话要用正则或者 split 来得到最后一个/后面的字符串(即传过来的值)
(在JS中使用 document.location.toString() 即可获得目标Url)

不过这种方法有一种弊端就是获取到的中文可能是乱码,还要在JS中转码,所以最好用Model来传值

  • 5
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值