【发布时间】：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" 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>【问题讨论】：
标签： java ajax rest spring-boot thymeleaf