Question

好的，所以我是Spring和ThymeLeaf的新手，我正在努力学习如何使用它，所以请善待。

所以我有一个返回对象列表的REST服务。我有一个ajax调用，它正在查询我的REST服务，并通过Jackson传回所需的对象作为解析的JSON。我想迭代通过在Thymeleaf迭代器中通过AJAX调用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但是，当控制器返回Thymeleaf页面时，Thymeleaf代码将在服务器中处理。一旦响应由服务器生成，并且没有Thymeleaf（或JSP），一切都将被转换为纯HTML。

这里有两个选择。

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

更新

对备选方案1的澄清您将创建一个新的Thymeleaf文件（普通文件，而不是Thymeleaf布局）。将迭代代码移动到该文件（不需要头/主体/标题等）。我们的想法是使用新的控制器方法返回部分HTML。此控制器方法将返回modelAndView中新生成的Thyemelef文件。然后spring会评估百万美元并根据你放在modelMap中的相关对象创建一个HTML。此HTML在AJAX请求中被接受为响应，并插入到文档中。

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

是否可以使用AJAX调用中的成功对象并将其传递给百万美元来迭代

1 个答案:

更新