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

爱被打了一巴掌 2023-02-22 15:54 14阅读 0赞

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

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/  
  
我们这里使用绝对路径，如下：

括号里的表示括号左边被大括号包起来的变量应该取得值，这里：  
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