是否可以使用 AJAX 调用中的成功对象并将其传递给 thymeleaf 进行迭代

Question

好的，我是 Spring 和 ThymeLeaf 的新手，我正在尝试学习如何使用它，所以请多关照。

所以我有一个返回对象列表的 REST 服务。我有一个 ajax 调用，它正在查询我的 REST 服务并通过 Jackson 将所需的对象作为已解析的 JSON 传回。我想遍历通过 AJAX 调用 Thymeleaf 迭代器中的 REST 服务获得的对象列表，以获取列表中每个对象的数据。

据我所知，这种遍历对象列表的想法只能通过设置上下文的控制器来完成，然后将对象列表和要在网页中遍历的键传递给它。

所以我的问题是：

这可能吗？
如果是这样，你能为我指明正确的方向吗？

< script >
  function getAllByUser() {

    $.ajax({
      type: "get",

      url: "https://localhost:8443/api/getAllForUser",
      cache: false,
      data: 'user=' + $("#userAcctName").val(),
      success: function(response) {
        alert(response);

        //some how pass this response data to ${postsList}

       // $('#test').html("" + response[0].subject);

        $(".card").children().removeClass('hidden');
        $('[data-toggle="popover"]').popover();
      },
      error: function() {
        alert('Error while request..');
      }
    });
  }

function getText() {

  $.ajax({
    type: "post",
    url: "https://localhost:8443/api/create",
    cache: false,
    data: $("#postSubmit").serialize(),
    success: function(response) {
      $('#result').html("");

      $('#title').html("" + response.subject);
      $('#dateTime').html("" + response.created);
      $('#data').html("" + response.content);
      $('#location').html("" + response.city);

      $(".bg-success").children().removeClass('hidden');
      $('[data-toggle="popover"]').popover();
      //alert('Success..');
    },
    error: function() {
      alert('Error while request..');
    }
  });
}

$(document).ready(function() {
  //    $('[data-toggle="popover"]').popover();
  $(".bg-success").children().addClass('hidden');

}); < /script>

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head lang="en">

  <title>Spring Ajax</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


  <link href="../static/css/bootstrap.css" th:href="@{css/bootstrap.css}" rel="stylesheet" media="screen" />

  <link href="../static/css/bootstrap-theme.css" th:href="@{css/bootstrap-theme.css}" rel="stylesheet" media="screen" />


  <script type="text/javascript" src="../static/js/jquery-2.2.2.js" th:src="@{js/jquery-2.2.2.js}"></script>


  <script type="text/javascript" src="../static/js/tether.js" th:src="@{js/tether.js}"></script>



  <script type="text/javascript" src="../static/js/bootstrap.js" th:src="@{js/bootstrap.js}"></script>



</head>

<body>



  <div class="container">
    <div class="jumbotron">
      <!--         <img src="../static/images/FBcover1200x628.png" width="1000" -->
      <!--              th:src="@{images/FBcover1200x628.png}"/> -->
      <h1>Form</h1>
      <form name="postForm" method="post" id="postSubmit">

        <p>
          Username
          <input type="text" id="userAcctName" name="userAcctName" value="Default User" />
        </p>
        <p>
          City
          <input type="text" id="city" name="city" value="Default City" />
        </p>
        <p>
          Post Content
          <input type="text" id="content" name="content" value="Default Content" />
        </p>
        <p>
          <input type="button" value="Done" onclick="getText()" />
        </p>
        <p>
          <input type="button" value="Get All By User" onclick="getAllByUser()" />
        </p>
      </form>
    </div>

    <!-- Results block -->

    <div class="card bg-success">
      <div class="card-block">
        <h4 class="card-title" id="title"></h4>
        <h6 class="card-subtitle text-muted" id="dateTime"></h6>
      </div>

      <div class="card-block">
        <p class="card-text" id="data"></p>
        <a href="#" class="card-link"></a>
        <button type="button" class="btn btn-sm btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">See Popover
        </button>
      </div>
      <div class="card-footer text-muted" id="location"></div>
    </div>



  </div>

  <div>

    <th:block th:each="post : ${postsList}">


      <div class="card ">
        <div class="card-block">
          <h4 class="card-title" id="test" th:text="${post.subject}">Subject</h4>
          <h6 class="card-subtitle text-muted" th:text="${post.created">Date
      Created</h6>
        </div>

        <div class="card-block">
          <p class="card-text" th:text="${post.content}">Post Data</p>
          <a href="#" class="card-link"></a>
          <button type="button" class="btn btn-sm btn-danger" data-toggle="popover" title="Popover title" data-content="th:text='${post.city}'">See Popover</button>
        </div>
        <div class="card-footer text-muted" th:text="${post.temperature}"></div>
      </div>

    </th:block>



  </div>




</body>

</html>

Answer 1

简短回答是否定的。您正尝试在浏览器中运行 Thymeleaf，但是当控制器 return 是 Thymeleaf 页面时，Thymeleaf 代码在服务器中处理。服务器生成响应后，没有 Thymeleaf（或 JSP），所有内容都将转换为纯 HTML。

这里有两个选择。

将 Thymeleaf 迭代移动到单独的 Thymeleaf 文件。然后您可以创建一个新的 Controller 方法来 return 这个模板。然后您可以向该端点发出 ajax 请求。现在，假设您的控制器将向模型对象添加一个集合，并将 return Thymeleaf 文件作为视图。现在，您的 Thymeleaf 文件将由 Thymeleaf 引擎处理，并将对集合进行循环并生成将发送的 HTML 以响应 ajax 调用。您的 ajax 成功回调可以将这段 HTML 放入您想要的 DOM 中。
您可以使用现有的 REST 端点，使用 AJAX 获取响应。然后你必须写 javascript 来生成 HTML。但是，如果您尝试手动执行，那将是乏味的，但可以使用某些库（如 Angular）轻松完成。但是同时使用服务器端模板（如 Thymeleaf）和客户端模板（如 Angular）并不是恕我直言的好主意。

更新

对选项 1 的澄清您将创建一个新的 Thymeleaf 文件（普通文件，不是 Thymeleaf Layout）。将迭代代码移动到该文件（不需要 head/body/title 等）。这个想法是 return 部分 HTML 使用新的控制器方法。此控制器方法将 return modelAndView 中新生成的 Thyemelef 文件。然后 spring 将评估 thymeleaf 并根据您放入 modelMap 的相关对象创建一个 HTML。此 HTML 被接受为 AJAX 请求中的响应，并被插入到文档中。

同样在控制器方法中，您可以直接访问 services/dao 以获取所需数据，类似于现有 REST 端点获取所需数据的方式。我没有尝试从不同的控制器端点获取数据，但理论上这也是可能的（同样取决于现有 REST 端点的编码方式）。

是否可以使用 AJAX 调用中的成功对象并将其传递给 thymeleaf 进行迭代

Is it possible to use the success object from an AJAX call and pass it to thymeleaf to iterate over

java

ajax

rest

thymeleaf

spring-boot

更新