Ajax 调用未在 thymeleaf spring boot 应用程序上更新结果答案

【问题标题】：Ajax call not updating result on thymeleaf spring boot appAjax 调用未在 thymeleaf spring boot 应用程序上更新结果
【发布时间】：2018-07-12 07:35:45
【问题描述】：

我有一个 springboot 应用程序，我使用 thymeleaf 作为前端。尝试在单击提交按钮时进行 ajax 调用。

这是我的控制器代码：

  @RequestMapping(value="/person", method = RequestMethod.GET)
public String testing(@RequestParam(value = "objectId") String groupObjectId, Model model) throws PersistenceException{
    Long objectID = Long.parseLong(objectId);
    User User = userService.findUser(objectID);
    model.addAttribute("user",user);
    return "userList::userList";
 }

这是我的 javascript ajax 调用：

   function getUserInfo(groupObjectId){
   $.ajax({
    type : "GET",
    url : "/person"+"?objectId="+objectId,
    timeout : 100000,
    success : function(result) {
        console.log("SUCCESS: ", result);
            $("#userListPanel").show();

        },
    error : function(e) {
            console.log("ERROR: ", e);
        },
    done : function(e) {
            console.log("DONE");
        }
    });

我有一个包含不同片段的索引页面：

        <div th:replace="organizationList :: organizationList" 
        th:remove="tag"></div>
        <div th:replace="userList :: userList" 
        th:remove="tag"></div>

我在组织列表中的一个字段上定义了 onclick 事件：

          <td class="col-xs-2"><a th:id="${org.name}" th:text="${org.name}" th:href="'javascript:getUserInfo(\'' + ${org.objectID} + '\');'"></a></td>

我的通话成功了，我在 Chrome 控制台中看到了如下结果以及该面板中的其他内容：

         <tr>
                <td><a href="#">Username1</a></td>
                <td>firstName</td>
                <td>LastName</td>
          </tr>

问题是这些更改没有反映在我的页面中。面板返回为空。我的 ajax 调用中有什么遗漏吗？完成我的 ajax 调用后，我还尝试了以下这些选项：

                  $("userListPanel").append(result);
            $("userListPanel").html(result);

或者有什么方法可以检索我在模型中设置的值？

这是我原来的 userList 模板：

  <div xmlns:th="http://www.thymeleaf.org" th:fragment="userList" th:remove="tag">
<div id="userListPanel" class="panel panel-primary collapse">
    <div class="panel-heading">
        <div class="panel-title">
            <span data-toggle="collapse" data-target="#userListBody" class="glyphicon glyphicon-minus"></span>
            Organization: orgA
            <span class="panel-title pull-right"> No. of Documents: 3</span>
        </div>
    </div>
    <div id="userListBody" class="panel-body panel-collapse panel-body-resizable collapse in panel-body-fixed-height paddingTop0" 
  th:fragment="resultsList">
        <table class="table table-striped table-hover" id="userListTable">
            <thead>
            <tr>
                <th>Name</th>
                <th>DOB</th>
                <th>Status</th>
            </tr>
            </thead>
            <tbody id="userListTableBody">
            <tr th:each="user:${userList}">
                <td th:text="${user.name}"></td>
                <td th:text="${user.dob}"></td>
                <td th:text="${user.status}"></td>
            </tr>
            </tbody>
        </table>
    </div>
  </div>

【问题讨论】：

标签： ajax spring-boot thymeleaf

【解决方案1】：

$("userListPanel").append(result);
$("userListPanel").html(result);

您需要在这些选择器前面加上“#”。没有它们，它会寻找一个不存在的<userListPanel> 标签。

试试这些：

$("#userListPanel").append(result);
$("#userListPanel").html(result);

【讨论】：

好主意..我确实尝试过，但没有区别..在我的 ajax 调用中还有什么我遗漏的吗？
如果您的 JavaScript 在帖子中是最新的，您只会显示用户列表，而不会填充它。你添加了 $('#userListPanel').html(result);在.show 行之后？
另外，如果您还没有，我会在 DevTools 中检查控制台错误并尝试使用 JavaScript 调试器单步执行您的代码。
我正在展示这一点并包含该行。面板显示，但结果为空。我在控制台中打印了一个结果，它按预期打印。调试时没有错误..
您可以将生成的模板添加到您的帖子中吗？不是 Ajax 响应的模板，而是原始页面。

【解决方案2】：

我从控制器返回了一个“用户”类型的 ResponseEntity 对象，并在 ajax 调用时动态生成了我的表数据。这是唯一有效的方法。

【讨论】：