使用 Ajax 填充 Thymeleaf div 的下拉列表答案

【问题标题】：Populate dropdown of a Thymeleaf div using Ajax使用 Ajax 填充 Thymeleaf div 的下拉列表
【发布时间】：2020-10-03 21:05:34
【问题描述】：

我有一个这样的 div

<div class="col-sm-4" id="notebooksDropdown">
    <select class="form-control" id="notebooks" name="notebooks">
        <option th:each="notebook : ${notebooks}" th:value="${notebook}" th:text="${notebook}"></option>
    </select>
</div>

我打了一个 ajax 调用来获取这样的笔记本

$.ajax({
   type: "GET",
   contentType: "application/json",
   url: "/getNotebooks",
   ...
   success: function (data) {
        ...
        //notebooks is the array with which I wish to populate the dropdown
        //this works fine
        for(i in notebooks){
            var options="<option value="+notebooks[i]+">"+notebooks[i]+"</option>";
            $(options).appendTo('#notebooks'); 
        }
   }

但是在 ajax 中以某种方式设置 $notebooks 后，我是否无法刷新下拉 div 标签，以便选项由 th:each 填充，而不是我正在执行的方式。类似：

//set $notebooks so the dropdown div can do its thing -> ??
//then refresh only that div
$( "#notebooksDropdown" ).load(window.location.href + " #notebooksDropdown" );

我是一名后端 java 开发人员，对（js、jquery、thymeleaf）非常陌生，所以任何帮助都很有价值。

【问题讨论】：

不是答案 - 只是一些提示：Thymeleaf 模板渲染，如您所知，是一种服务器端技术。因此，我认为您的 ajax 调用必须发送参数，指示使用什么 Thymeleaf fragment（用于下拉 HTML），以及在 Thymeleaf 模型中提供哪些数据 - 基于用户的相关客户端选择（创建您的笔记本阵列）。 ajax 响应将是 HTML 而不是 JSON。免责声明：我从未以这种方式使用过 Thymeleaf。但它应该可以工作。
感谢@andrewjames。我想我可以在 ajax 调用之后在我的 js 代码中设置 ${notebooks} 。但后来意识到 ${notebooks} 是 thymeleafs 的 request.getAttribute("notebooks") 方式。我们知道可以在服务器端解决，所以回答我的问题是我们不能在客户端 js 中填充/更改/（甚至访问）$ 变量。
只有请求才会起作用，get 或 post。

标签： jquery ajax thymeleaf

【解决方案1】：

${notebooks} 是 thymeleafs 的 request.getAttribute("notebooks") 方式。我们知道在页面本身的编译过程中会在服务器端解决，所以回答我的问题是我们不能在客户端 js 中填充/更改/（甚至访问）$variables。

【讨论】：