是否可以使用 AJAX 调用中的成功对象并将其传递给 thymeleaf 进行迭代
Posted
技术标签:
【中文标题】是否可以使用 AJAX 调用中的成功对象并将其传递给 thymeleaf 进行迭代【英文标题】：Is it possible to use the success object from an AJAX call and pass it to thymeleaf to iterate over 【发布时间】：2016-07-14 15:03:54 【问题描述】：好的，我是 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" -->
<!-- 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>【问题讨论】：
【参考方案1】：简短的回答是否定的。您正在尝试在浏览器中运行 Thymeleaf，但是当控制器返回 Thymeleaf 页面时，Thymeleaf 代码会在服务器中处理。一旦服务器生成响应并且没有 Thymeleaf（或 JSP），所有内容都将被转换为纯 HTML。
这里有两个选择。
将 Thymeleaf 迭代移动到单独的 Thymeleaf 文件。然后你可以创建一个新的控制器方法来返回这个模板。然后您可以向该端点发出 ajax 请求。现在，假设您的控制器将向模型对象添加一个集合并将 Thymeleaf 文件作为视图返回。现在，您的 Thymeleaf 文件将由 Thymeleaf 引擎处理，并对集合进行循环并生成一个 HTML，该 HTML 将被发送以响应 ajax 调用。你的 ajax 成功回调可以把这段 HTML 放到你想要的任何地方。
您可以使用现有的 REST 端点，使用 AJAX 获取响应。然后你必须编写 javascript 来生成 HTML。但是，如果您尝试手动执行，那将是乏味的，但是使用某些库（例如 Angular）可以轻松完成。但是恕我直言，同时使用服务器端模板（如 Thymeleaf）和客户端模板（如 Angular）并不是一个好主意。
更新
关于选项 1 的说明 您将创建一个新的 Thymeleaf 文件（普通文件，而不是 Thymeleaf 布局）。将迭代代码移动到该文件（不需要头部/正文/标题等）。这个想法是使用新的控制器方法返回部分 HTML。这个控制器方法会在modelAndView中返回新生成的Thyemelef文件。然后 spring 将评估 thymeleaf 并根据您放入 modelMap 的相关对象创建一个 HTML。该 HTML 被接受为 AJAX 请求中的响应，并被插入到文档中。
同样在控制器方法中，您可以直接访问 services/dao 来获取所需的数据，类似于现有 REST 端点获取所需数据的方式。我没有尝试从不同的控制器端点获取数据，但理论上这也是可能的（再次取决于现有 REST 端点的编码方式）。
【讨论】：
是的，感谢您的确认。如果我要通过选项 1，您能否通过将迭代分成一个单独的文件来澄清您的意思。你在谈论 Thymeleaf 布局吗？对于新控制器，我假设您希望我访问控制器中的其余服务，然后获取对象列表并通过模型视图返回带有对象列表的 Thymeleaf 部分视图？我理解正确还是您的意思是别的？ 你能澄清一下我应该如何去做选项1吗？谢谢以上是关于是否可以使用 AJAX 调用中的成功对象并将其传递给 thymeleaf 进行迭代的主要内容，如果未能解决你的问题，请参考以下文章
从 Django 中的 JsonResponse 中提取字段值并将其传递给 Ajax Jquery