Question

我有一个工作的django投票系统，使用数据库中条目的上下按键。

我需要在页面上刷新{{entry.score}}而不重新加载，因为页面上会有其他条目。 {{entry.text}}可以刷新，但需要保持相同的条目，直到不同的按键选择不同的条目。

我试图用ajax做，但得到500内部服务器错误，没有刷新，

GET http://127.0.0.1:8000/voteup/?voteid=30 500 (INTERNAL SERVER ERROR) jquery.min.js:4
send jquery.min.js:4
n.extend.ajax jquery.min.js:4
n.(anonymous function) jquery.min.js:4
(anonymous function) (index):76
n.event.dispatch jquery.min.js:3
r.handle

即使投票正确进行......

（index）：voting.html中的76是：$ .get（＆＃34; / voteup /＆＃34;，args）.done（function（data）{

voting.html

 <div class = "table">
  <div id="Vote" class = "vote">
  <div style="text-align: left">
  {% for entry in voting_entry_list %} 
    <li><a href="/entries/{{ entry.id }}/">{{ entry.text }}&nbsp{{ entry.score }}</a></li>
    <p>
    <input type="submit" id="voteid" name='voteid' value="{{ entry.id }}" autofocus value="" onfocus="this.value = this.value;" class = "transparent"/>
          <script>
          var data = '#Vote';
          var url = "/voting/";
            $(document).ready(function() {
              $("#voteid").bind("keydown", function(e) { //input #submit?????
                if (e.keyCode == 38) {
                  var text = $("#voteid").val();        
                  var args = {'voteid':text};       
                  $.get("/voteup/", args).done(function(data) {
                    console.log("message: " + data);
                        $.ajax({      
                            url: url,
                            data: data,
                            dataType: 'html',
                            success: function(data){
                                $(this).html(data); //this?
                            }   
                        });
                  });
                return false;
                }       
              });
            });     
          </script>
     {% endfor %}
      </div>
      </div>
  </div>

views.py

def index(request):   
   context = { # actually one item, command from extended object manager
     'voting_entry_list': Entry.objects.unvoted_or_random(), 
   }     
   return render(request, 'entries/index.html', context); 

def voting(request):
    context = {'voting_entry_list': Entry.objects.random(),}      
    return render(request, 'entries/voting.html', context);

def voteup(request):
    voting_id = request.GET.get('voteid') 
    e = Entry.objects.unvoted_or_random()
    context = {'voting_entry_list': e,}
  if request.method=='GET':
    v = Entry.objects.get(pk=voting_id)
    v.score +=1 
    v.voted=True 
    v.save() 
    context = {'voting_entry_list': v,}
  else:
    pass
  return render(request, 'entries/voting.html', context);

Models.py

class EntryManager(models.Manager): #a basic extention to the model basemanager to insert new sorting
def unvoted_or_random(self): # command definition uses models input
    unvoted_entries = self.filter(voted = False).order_by('-pub_date') # sorted by youngest unvoted entries from any user
    voted_entries = self.filter(voted = True).order_by('?') # if no unvoted entries, voted boolean enables random selection '?'  
    if unvoted_entries: # for boolean unvoted
        return unvoted_entries[:1] # return latest
    else: # for boolean voted
        return voted_entries[:1] # return random

Answer 1

我刚与大学的博士生进行了一次会谈，他让我走上正轨。

我遇到的基本问题是关于使用Jquery和Ajax的理念，我发现很难从手册和在线支持中收集到的东西，我发现在简单任务的基础知识上它是不透明的。为此，我将在此提出最终的代码，希望它能帮助人们开始使用类似的简单投票系统。

感谢Refresh a div in Django using JQuery and AJAX Reload entire page in Ajax on Django? How to correctly refresh a div using Jquery/Ajax in a Django template Passing list of values to django view via jQuery ajax call 对于点点滴滴......

投票刷新而不更改条目（按钮糖化）

我的主要问题是我为网址和数据做了什么。事实证明我有一个错误的结束。在我的情况下数据是从视图返回.get（我认为这是我必须传递给刷新的条目ID），我不需要为我正在制作的非常简单的系统定义url 。

所以这个：

<强> voting.html

var data = '#Vote';
var url = "/voting/";

$.ajax({      
     url: url,
     data: data,
     dataType: 'html',
     success: function(data){
     $(this).html(data);
  }

成为这个：

$("#score").text(data); //span updates score with new value from views

在投票时刷新分数。在该代码上方的href中的跨度允许我访问分数：

<span id="score">{{ entry.score }}</span>

我唯一需要做的就是在访问条目模型并添加投票时将其添加到voteup（request）或votedown（request）中的视图中：

<强> views.py

return HttpResponse(v.score)

这会照顾到投票。当您按住上下箭头时，该条目保持不变，但保存到数据库后，投票将从视图中刷新。

使用刷新更改条目的键

要更改条目（到新的随机条目），右箭头键的.get将返回一个字符串，其中包含随机条目的ID，文本和分数;

<强> views.py

def random_entry(request):
e = Entry.objects.random()[0]
return HttpResponse("%s,%s,%s" % (e.id, e.text, e.score))

哪个voting.html会分割和刷新文字和分数，并更改当前的数据：

<强> voting.html

if(e.keyCode == 39) { //right key
     $.get("/random-entry/", {}).done(function(data) {
         var parts = data.split(",");
          $("#entry-text").text(parts[1]);
          $("#score").text(parts[2]);
          currentid = parts[0];
          console.log("random entry data: " + data);
         });
        return false;}

这是主要的变化。我在下面提供了完整的（ish）代码，希望它可以帮助某人;

<强> voting.html

 <div class = "table">
  <div id="Vote" class = "vote">
  <div style="text-align: left">
  {% for entry in voting_entry %} 
    <li><a href="/entries/{{ entry.id }}/"><span id="entry-text">{{ entry.text }}</span> <span id="score">{{ entry.score }}</span></a></li>
    <p>
    <input type="submit" id="voteid" name='voteid' value="{{ entry.id }}" autofocus value="" onfocus="this.value = this.value;" class = "transparent"/>
          <script>
            $(document).ready(function() {
            var currentid = {{entry.id}}; //entry id is defined
              $("#voteid").bind("keydown", function(e) {
                if (e.keyCode == 38) {  //up arrow key
                  var args = {'voteid':currentid }; //current id is used
                  $.get("/voteup/", args).done(function(data) { //when .get is done, returns data from views(score)                   
                    console.log("message: " + data);
                    $("#score").text(data); //span updates score with new value from views
                  });
                return false;
                }
                if (e.keyCode == 40) { //down arrow key
                  var args = {'voteid':currentid };     //current id is used
                  $.get("/votedown/", args).done(function(data) { //when .get is done, returns data from views(score)
                    console.log("message: " + data);  
                    $("#score").text(data); //span updates score with new value from views
                  });
                return false;
                }
                if(e.keyCode == 39) { //right key
                  $.get("/random-entry/", {}).done(function(data) {
                    var parts = data.split(",");
                    $("#entry-text").text(parts[1]);
                    $("#score").text(parts[2]);
                    currentid = parts[0];
                    console.log("random entry data: " + data);
                  });
                 return false; 
                 }      
              });
            });     
          </script>
     {% endfor %}
      </div>
      </div>
  </div>

<强> views.py

from django.shortcuts import render
from django.http import HttpResponse, HttpResponseRedirect
from entries.models import Entry
from datetime import datetime
from django.utils import timezone
from django.views.decorators.csrf import csrf_protect

def index(request):   
 context = {
  'latest_entry_list': Entry.objects.order_by('-pub_date')[:10],
  'high_entry_list': Entry.objects.order_by('-score','-pub_date')[:10],
  'high_entry': Entry.objects.order_by('-score','-pub_date')[:1],
  'low_entry_list': Entry.objects.order_by('score','-pub_date')[:10],
  'voting_entry': Entry.objects.unvoted_or_random(),
 }
 return render(request, 'entries/index.html', context);

def add(request):
 created_date = default=datetime.now()
 created_text = request.GET.get('text')    
 e = Entry(text=created_text,pub_date=created_date) 
 e.save()       
 return HttpResponse('done')

def enter(request):
 return render(request, 'entries/enter.html'); 

def top(request):
 context = {
  'high_entry': Entry.objects.order_by('-score','-pub_date')[:1],
 }
 return render(request, 'entries/top.html', context);

def voting(request):
 context = {'voting_entry': Entry.objects.random(),}      
 return render(request, 'entries/voting.html', context);

def random_entry(request):
 e = Entry.objects.random()[0]
 return HttpResponse("%s,%s,%s" % (e.id, e.text, e.score))

def voteup(request):
 voting_id = request.GET.get('voteid')
 if request.method=='GET':
    v = Entry.objects.get(pk=voting_id)
    v.score +=1
    v.voted=True
    v.save()
    return HttpResponse(v.score)
 else:
    pass
 return HttpResponse('done')   

def votedown(request):
 voting_id = request.GET.get('voteid')
 if request.method=='GET':
    v = Entry.objects.get(pk=voting_id)
    v.score -=1
    v.voted=True
    v.save()
    return HttpResponse(v.score)
 else:
    pass
 return HttpResponse('done')

Django的是，jQuery，Ajax的;刷新div投票系统不工作？

1 个答案: