如何刪除重新加載頁面？

Question

如何在無需重新加載頁面的情況下從數據庫獲取投票數據？

我的models.py

from django.db import models 
from django.contrib.auth.models import User 
from django.db.models.signals import post_save 


class Post(models.Model): 
    post = models.CharField(max_length=500) 
    user = models.ForeignKey(User) 
    created = models.DateTimeField(auto_now_add=True) 
    updated = models.DateTimeField(auto_now=True) 
    post_img = models.ImageField(upload_to='posts_img/') 
    votes = models.IntegerField(default=0) 

我views.py

def upvote(request, post_id): 
    vote = Post.objects.get(pk=post_id) 
    vote.votes += 1 
    vote.save() 
    return redirect('home:home') 

我home.html的

   {% if post.post_img %} 
        <img class="post-img" src="{{ post.post_img.url }}"> 
        <a href="upvote/{{ post.id }}"> vote </a>{{ post.votes }} 
       {% endif %} 
       <p><i>Posted on <b class="date">{{ post.created }}</b></i</p> 

我urls.py

from django.conf.urls import url 
from . import views 

urlpatterns = [ 

    url(r'^upvote/(?P<post_id>[0-9]+)/$', views.upvote, name='upvote'), 

] 

如果我點擊主頁上的投票鏈接，頁面將重新加載並且會得到票數結果，

如何刪除重新加載頁面。

我的英文不好，但我需要你的幫助！

Answer 1

您已標記此問題AJAX，但我沒有看到您的任何代碼？根據你的要求，我認爲this previously asked question應該能夠幫助你解決這個問題。特別是使用Django模板和代碼的HTML和JS部分

HTML

<table id="_appendHere" class="table table-striped table-condensed"> 
     <tr> 
     <th>Reg.nr.</th> 
     <th>M&auml;rke</th> 
     <th>Modell</th> 
     </tr> 
     {% for i in order %} 
     {% if i.order_booked %} 
     <tr class="success"> 
     {% else %} 
     <tr>      
     {% endif %} 

     <td>{{ i.regnr|upper }}</td> 
     <td>{{ i.brand|capfirst }}</td> 
     <td>{{ i.brand_model|capfirst }}</td> 
     </tr> 
     {% endfor %} 
    </table> 

JS

<script> 
    var append_increment = 0; 
    setInterval(function() { 
     $.ajax({ 
      type: "GET", 
      url: {% url 'get_more_tables' %}, // URL to your view that serves new info 
      data: {'append_increment': append_increment} 
     }) 
     .done(function(response) { 
      $('#_appendHere').append(response); 
      append_increment += 10; 
     }); 
    }, 10000) 
</script> 

Answer 2

我從您的文章理解，就是你需要通過upvote發佈的數據則顯示或從數據庫重新加載當前的投票結果，而不重新定向或重新加載頁面。如果我理解正確，請執行以下操作，否則留下評論或更新您的問題。

在home.html

... 
... 
<a href="#" class="upvote" data-action="/upvote/{{ post.id }}"> vote </a> 
<span class="votes"> 
{{ post.votes }} 
</span> 
... 
... 
<script> 
$(".upvote").click(function(e){ 
    e.preventDefault(); 
    var $this = $(this); 
    var url = $(this).data("action"); 
    $.post(url, function(response){ 
    if(response && response.success==true) 
     $this.next(".votes").text(response.votes); 
    }); 
}); 
</script> 

在views.py，不要重定向到家裏，而不是返回JSON

from django.utils import simplejson 
#use the following instead as you use Django 1.11 
from django.core.serializers import serialize 

def upvote(request, post_id): 
    ... 
    ... 
    #get votes from database and assign to variable 
    vote = Post.objects.get(pk=post_id) 
    votes_from_database = vote.votes 
    response_data_to_dump = { 
     'success': true, 
     'votes': votes_from_database, 
    } 

    data = simplejson.dumps(response_data_to_dump) 
    # use the following instead for Django 1.11 
    data = serialize('json', response_data_to_dump) 
    return HttpResponse(data, content_type='application/json') 
    #use the following fro Django 1.6 
    #return HttpResponse(data, mimetype='application/json')