如何在Thymeleaf中构造ajax请求的url(SpringBoot+Thymeleaf拼接URL,字符和请求参数参数变化)

    技术2025-09-13  72

    1.在ajax请求的时候拼接basePath ,可以将basePath 设置成全局变量,或者设置成ajax请求从后台获取定义在yaml文件中的basePath 的值。

    <script type="text/javascript" th:inline="javascript"> /*<![CDATA[*/ var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/; $(document).ready(function () { $.ajax({ type: 'post', dataType: 'text', url: basePath + '/index/ajaxtest', data: {}, cache: false, async: true, success: function (data) { var data = eval('(' + data + ')'); $('#idUser').text(data.name); $('#idMsg').text(data.msg); } }); }); /*]]>*/ </script>

    2.在thymeleaf页面的请求中拼接basePath 

    问题: 最近搭建网站需要使用Thymeleaf来创建一个http://localhost:8081/news/list/all?page=1&size=10 这样的url,现在希望“all”、“page”、“size”变化,其他的不变:“all”可能自身变为其他字符串,如"top",而“page”“size”只改变数值,如"3"和"30"。结果希望变为:http://localhost:8081/news/list/top?page=3&size=30 解决方案: Controller如下,“all”其实就是下面的type变量,通过

    model.addAttribute("type", type)

    传给前端,“page”“size”作为请求参数@RequestParam:    

    /**      * 查询所有新闻      * @return 新闻列表      */     @GetMapping("list/all")     public String listAll(Model model,                           @RequestParam(value = "page", defaultValue = PAGE_DEFAULT) Integer page,                           @RequestParam(value = "size", defaultValue = SIZE_DEFAULT) Integer size) {         String type = "all";         logger.info("List news:" + type);         PageHelper.startPage(page, size);         List<News> list = mNewsService.selectAll();         PageInfo<News> pageInfo = new PageInfo<>(list);         model.addAttribute("type", type);         model.addAttribute("newsList", list);         int pages = pageInfo.getPages();         model.addAttribute("indexPage", page < 0 ? 1 : (page > pages ? pages : page));         model.addAttribute("size", size);         model.addAttribute("totalPage", pages);         return "list/index";     }

    前端的话,【绝对路径】th:href中是@{/news/list/}那么url会映射成:http://localhost:8081       +        /news/list/ 【相对路径】如果去掉第一个斜杠@{news/list/},从以上的Controller路径点击,则url会映射成:http://localhost:8081/news/list/ + /news/list/ 我们这里使用绝对路径,如下:

    <a th:href="@{/news/list/{type}(type=${type},page=${indexPage},size=${size})}">上一页</a>

    括号里的表示括号左边被大括号包起来的变量应该取得值,这里: type会被后端传来的type变量值赋值, page会被后端传来的indexPage变量值赋值, size会被后端传来的size变量值赋值。 它们作用的结果: 如果括号前出现了对应的大括号变量,映射时会替换掉,这里如果传来的type为"top",则映射的url对应位置为/news/list/top 如果括号前没有出现对应的大括号变量,则会将括号里对应的变量变为url参数形式,即?page=1&size=10 如果按照我以上的th:href点击,最终得到的url映射为: http://localhost:8081/news/list/all?page=1&size=10 如果后端传参: type = "top"; indexPage = "3"; size = "30"; 那么url会变为: http://localhost:8081/news/list/top?page=3&size=30

     

    Processed: 0.014, SQL: 9