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

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

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

据我所知，迭代对象列表的想法只能通过 Controller 来完成，您可以在 Controller 中设置上下文，并向其传递对象列表和要在网页中迭代的键。

所以我的问题是:

这可能吗？
如果是这样，您能为我指明如何执行此操作的正确方向吗？

< 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>

最佳答案

简短的回答是“否”。您正在尝试在浏览器中运行 Thymeleaf，但是当 Controller 返回 Thymeleaf 页面时，Thymeleaf 代码将在服务器中进行处理。一旦服务器生成响应，并且没有 Thymeleaf(或 JSP)，所有内容都将被转换为纯 HTML。

这里有两个选择。

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

更新

对选项 1 的澄清您将创建一个新的 Thymeleaf 文件(普通文件，而不是 Thymeleaf 布局)。将迭代代码移至该文件(不需要 head/body/title 等)。这个想法是使用新的 Controller 方法返回部分 HTML。该 Controller 方法将在 modelAndView 中返回新生成的 Tyemelef 文件。然后 spring 将评估 thymeleaf 并根据您放入 modelMap 中的相关对象创建 HTML。此 HTML 被接受为 AJAX 请求中的响应并插入到文档中。

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

关于java - 是否可以使用 AJAX 调用中的成功对象并将其传递给 thymeleaf 进行迭代，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36243966/

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

更新

上一篇：java - 循环问题

下一篇：Java 泛型 - 如何编写带有类型参数的静态方法？