Question

我有一个div：

<div class="textWord_about" data-link="first">
  <br/><br/>
  <br/><br/><br/>
  <div class="col-xs-12"></div>
  <table class="table table-hover">
    <thead>
    <tr style="margin-right:0;">
      <th>Username</th>
      <th>Follower Number</th>
      <th>Following Number</th>
      <th>Profile</th>
      <th>Created At</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="follower:${followers}" style="margin: 0 auto;">
      <td th:text="${api.getHash(follower.getScreenName())}"></td>
      <td th:text="${follower.getFollowersCount()}"></td>
      <td th:text="${follower.getFriendsCount()}"></td>
      <td><a th:href="@{'/viewprofile'(id=${follower.getId()})}">profile</a></td>
      <td th:text="${follower.getCreatedDate()}"></td>
    </tr>
    </tbody>
  </table>
</div>

我使用Jquery和Ajax从服务器获取followers的新值。问题是如何使用Jquery设置这个新值？

我尝试过这样的事情：

$('.textWord_about[data-link=' + $(this)
    .data('button-link-followerList') + ']')
    .attr('followers', data.followers);

带有Ajax请求的脚本是这样的：

$(function () {
    $(".button-link-followerList").click(function () {
        event.preventDefault();
        var $post = $(this);
        var href = $($post).attr("id");
        var currentCredit_followerList = parseInt($('#_followerList_credit').text());
        console.log("herf: " + href);
        if (currentCredit_followerList != 0) {
            console.log("condition checked!");
            $.ajax({
                type: "GET",
                contentType: "application/json; charset=utf-8",
                url: href,
                dataType: 'json'
            }).done(function (data) {
                if (data.status == "success") {
                    var newCredit_followerList = currentCredit_followerList - 1;
                    $('#_followerList_credit').text(newCredit_followerList);
                    $('.mainContainer').hide();
                    $('.textWord_about > table > tbody > tr').remove();

                    $.each(followers, function (index, obj) {
                        var row = '<tr>' +
                            '<td>' + obj.screenName() + '</td>' +
                            '<td>' + obj.followersCount + '</td>' +
                            '<td>' + obj.friendsCount + '</td>' +
                            '<td><a href="/viewprofile' + '?id=' + obj.id + '">profile</a></td>' +
                            '<td>' + obj.createdDate + '</td>' +
                            '</tr>';
                        $('.textWord_about > table > tbody').append(row);
                    });

                    $('.textWord_about[data-link=' + $(this).data('button-link-followerList') + ']').fadeIn({width: '200px'}, 300);
                    return false;
                }
                else if (data.status == "ratelimit") {
                    window.location.href = "ratelimit";
                }
            });

        } else {
            // Show Alarm!
            $('#_credit_error').fadeIn(100);
        }
    })
});

但是，控制台日志表明followers未定义。结果，我看不到我的div的新值。

注意：在第一次加载包含div的页面时，它会被隐藏，followers没有任何值。

Answer 1

th：属性指导Thymeleaf，如何在输出html中呈现一些静态元素，但不提供任何特殊属性。当您使用Web浏览器的检查器检查页面的源时，您将在<tbody>内看到一个oridnary内容，而没有任何followers，例如。

<tr>
    <td>John Doe</td>
    <td>10</td>
    <td>100</td>
    <td><a href="/viewprofile?id=1">profile</a></td>
    <td>01-08-2017</td>
</tr>

您从服务器接收JSON，因此如果您想添加/替换值，您必须使用jQuery操作DOM。您可以利用jQuery方法remove()，each()和append()

首先删除旧行（如果你想用新的追随者替换旧的追随者）。

$('.textWord_about > table > tbody > tr').remove();

其次遍历您从服务器收到的关注者列表。为每个对象添加包含适当数据的新行。

$.each(data.followers, function(index, obj) {
    var row = '<tr><td>' + obj.screenName() + '</td><td>' + obj.followersCount + '</td><td>' + obj.friendsCount + '</td><td><a href="/viewprofile' + '?id=' + obj.id + '">profile</a></td><td>' + obj.createdDate + '</td><td></tr>';
    $('.textWord_about > table > tbody').append(row);
});

这可以解决您的问题。

注意：我在脚本（[[ @{'/viewprofile'} ]]）中使用了Thymeleaf语法来评估正确的链接地址，因此请记住将整个脚本放入带有js内联的标记中： <script th:inline='javascript'>。

注意我将网址硬编码到个人资料视图，这应该没问题。否则，如果您想使用百里香的@{}语法评估它们，则必须应用workaround。在html文件中提供内联脚本，用于评估您的网址并将其分配给变量：

<script type="text/javascript" th:inline="javascript" > var viewprofileUrlPrefix = [[ @{'/viewprofile'} ]] </script>

然后只需在js文件中使用该变量，同时附加：

'<a href="' + viewprofileUrlPrefix + '?id=' + obj.id

注2：我跳过了api.getHash( ... )的部分，因为我不知道它在做什么。我假设收到的JSON将包含正确的值，因此您不必通过javascript进行评估。这将是最方便的。

使用新属性重新加载div

1 个答案: