springboot+thymeleaf模板下使用Ajax异步添加页面的标签（解决thymeleaf使用Ajax难题）

简单介绍功能需求

想要做的是显示一个书籍信息的详细页面，页面加载完成后使用Ajax异步请求服务器获取当前书籍同类别的其他书籍信息，将这些同类别书籍的信息罗列到下面，如图所示：

thymeleaf跟jsp实现该功能的话有所不同

在jsp模板上可以使用EL表达式（<%request...%>）来可以完成ajax的url路径

而thymeleaf需要使用th:inline元素外还要使用thymeleaf的无标签[[]]元素

才能完成对ajax的url路径输入

 

以下是功能的实现说明

script标签中加入th:inline="javascript"

1、ajax的url使用thymeleaf的[[@{/xxx/xxx}]]来加上项目的路径

2、添加节点的中给img标签和a标签加上项目路径也可以使用[[@{/xxx/xxx}]]

3、第二点中如果不使用[[@{/xxx/xxx}]]，就需要在Springboot项目中的application.properties文件里不要设置项目访问路径

例如：（这里是设置项目访问的）

server.servlet.context-path=/bookstore

实现效果：

如图所示，img标签和a标签的链接都成功加上了项目路径

Java后台代码：

 @PostMapping("/details/id/{bid}/btid/{btid}")
    @ResponseBody
    public List queryBookByBookType(@PathVariable(name="bid") Integer bid,@PathVariable(name="btid") Integer btid){
        System.out.println(bid+" "+btid);
        List bookList2=bookService.queryBooksByBtid(bid,btid);
        return bookList2;
    }

上面代码关于该功能的controller层请求方法代码