Question

我有一个springboot应用程序，我使用百里香作为前端。尝试点击提交按钮进行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>

Answer 1

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

您需要包含＆＃34;＃＆＃34;在这些选择者面前。没有它们，它正在寻找一个不存在的<userListPanel>标签。

请尝试这些：

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

Answer 2

我从控制器返回了一个'User'类型的ResponseEntity对象，并在ajax调用中动态生成了我的表数据。这是它运作的唯一方式。

Ajax调用不在thymeleaf spring boot app上更新结果

2 个答案: