Question

我无法将它们连接在一起。我正在尝试构建一个小型排行榜应用程序。基本上用户只需投票或投票。我已经完成了所有工作，除了我希望排行榜本身能够实时更新或接近它而无需刷新页面。

我知道我需要一种方法来基本上根据投票获得更新的列表并按最高票数对它们进行排序。所以我使用Django rest来构建一个API端点，按照我想要的顺序生成一个字典列表。

下一步是使用AJAX获取该列表。我只是无法弄清楚如何让我的新列表取代旧列表。我开始编写我的ajax请求，发现我正在重写我的整个HTML模板，这可能不对。有人可以给我一些方向吗？我可能只是在思考这个问题。也许我只需要一个刷新整个页面的ajax请求。

我想我可能在抓取“更新”HTML类时遇到了麻烦。我不需要附加或前置只是重新排序给定的元素。

或者我完全过分思考这一切，所以另一种观点可能就是我所需要的。

查看

def streams_list(request):
    streams_ranked = StreamPost.objects.annotate(q_count=Count('upvotes')) \
                                        .order_by('-q_count')
    context = {
        'streams_ranked' : streams_ranked,
        'form': StreamPostForm()
    }
    return render(request, 'streams/index.html', context)

Index.html 如果我手动刷新此页面，则效果非常好。

<div id='stream-list'>
  {% include 'streams/leaderboard_list.html' %}
</div>

leaderboard_list.html

<div class="row">
  <div class="col-md-12">
    {% for stream in streams_ranked %}
      <div class="post-list-box">
        <h1 class="stream-title">{{ stream.title }}</h1>

        <h4 class="stream-description">{{ stream.description }}</h4>

        <a class="btn btn-warning " href="{% url 'streams:detail' pk=stream.pk %}">
        View Stream</a>
        <p>comment area</p>

        <div class="row">
          <div class="col-sm-3 voting-buttons">
            <a class="upvote-btn" data-href='{{ stream.get_api_upvote_url }}'
            href='{{ stream.get_upvote_url }}'><i class="fas fa-thumbs-up"></i></a>

            <span class="upvote-count" data-href="{% url 'streams:vote-count' pk=stream.pk %}">
              {{ stream.upvotes.count }}
            </span>

            <a class="downvote-btn" data-href="{{ stream.get_api_downvote_url }}"
            href='{{ stream.get_downvote_url }}'><i class="fas fa-thumbs-down"></i></a>

            <span class="downvote-count" data-href="{% url 'streams:vote-count' pk=stream.pk %}">
                {{ stream.downvotes.count }}
            </span>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

AJAX / JS

$('#stream-list').click(function() {
  $.ajax({
    url: '/',
    method: 'GET',
    data: {},
    success: function(data){
      $('#stream-list').html(data);
    }, error: function(error){
      console.log(error)
      console.log("error")
    }
  })
});

更新最终工作代码

模板的索引

<div id='stream-list'>
  <tbody class='table_body'>
  {% include 'streams/leaderboard_list.html' %}
  </tbody>
</div>

leaderboard_list.html

<div class="row">
  <div class="col-md-12">
    {% for stream in streams_ranked %}
      <div class="post-list-box">
        <h1 id="stream-title">{{ stream.title }}</h1>

        <h4 id="stream-description">{{ stream.description }}</h4>

        <a class="btn btn-warning" href="{% url 'streams:detail' pk=stream.pk %}">
        View Stream</a>
        <p>comment area</p>

        <div class="row">
          <div class="col-sm-3 voting-buttons">
            <a class="upvote-btn" data-api-upvote='{{ stream.get_api_upvote_url }}'
            href='{{ stream.get_upvote_url }}'><i class="fas fa-thumbs-up"></i></a>

            <span id="upvote-count" data-upvotes="{% url 'streams:vote-count' pk=stream.pk %}">
              {{ stream.upvotes.count }}
            </span>


            <a class="downvote-btn" data-api-downvote="{{ stream.get_api_downvote_url }}"
            href='{{ stream.get_downvote_url }}'><i class="fas fa-thumbs-down"></i></a>

            <span id="downvote-count" data-downvotes="{% url 'streams:vote-count' pk=stream.pk %}">
                {{ stream.downvotes.count }}
            </span>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>

JS控制显示更新后的列表

var refreshStream = function(){
  var getNewDataUrl = '/streams/'
    $.ajax({
        url: getNewDataUrl,
        method: 'GET',
        data: {},
        success: function(data){
          $('#stream-list').replaceWith($('#stream-list',data));
        },
        error: function(error){
            console.log(error);
            console.log("error");
        }
    });
}

var total_seconds = 5; // refresh every 5 seconds

setInterval(function(){
    refreshStream();
},total_seconds * 1000);

查看

def streams_list(request):
    streams_ranked = StreamPost.objects.annotate(q_count=Count('upvotes')) \
                                    .order_by('-q_count')
    context = {
        'streams_ranked' : streams_ranked,
        'form': StreamPostForm()
    }

    return render(request, 'streams/index.html', context)

Answer 1

使用setInterval每隔一秒刷新HTML的相关页面。

var refreshStream = function(){
    $.ajax({
        url: '/url_to_view/',
        method: 'GET',
        data: {},
        success: function(data){
            $('#stream-list').replaceWith($('#stream-list',data));
        },
        error: function(error){
            console.log(error);
            console.log("error");
        }
    });
}

var total_seconds = 5; // refresh every 5 seconds

setInterval(function(){
    refreshStream();
},total_second * 1000);

保持您的观点：

def streams_list(request):
    streams_ranked = StreamPost.objects.annotate(q_count=Count('upvotes')) \
                                    .order_by('-q_count')
    context = {
        'streams_ranked' : streams_ranked,
        'form': StreamPostForm()
    }

    return render(request, 'streams/leaderboard_list.html', context)

使用ajax更新Django列表视图

1 个答案: