-1

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

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

我正在尝试用 ajax 来做，但是得到一个 500 Internal Server Error 并且没有刷新，

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

即使投票通过正确...

（索引）：voting.html 中的 76 是：$.get("/voteup/", args).done(function(data) {

投票.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>

视图.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);

模型.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
4

1 回答 1

1

我刚刚在大学和一位博士生进行了一次会议，他让我走上了正轨。

我遇到的基本问题是关于使用 Jquery 和 Ajax 的哲学，我发现很难从手册和在线支持中收集到这些内容，我发现这些内容在简单任务的基础上是不透明的。为此，我将在这里展示最终代码，希望它可以帮助人们开始使用类似的简单投票系统。

感谢Refresh a div in Django using JQuery and AJAX Reload entire page in Ajax on Django? 如何在 Django 模板中使用 Jquery/Ajax 正确刷新 div 通过 jQuery ajax 调用将值列表传递给 django 视图 对于点点滴滴...

投票刷新而不更改条目（按钮混搭）

我的主要问题是我对 url 和数据做了什么。事实证明我弄错了棍子的一端。在我的例子中，数据是视图 .get 的返回（我认为这是我必须传递给刷新的条目 id），我不需要为我正在制作的非常简单的系统定义 url。

所以这：

投票.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

在投票时刷新分数。Span 在上面的代码中允许我访问分数：

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

当我访问入口模型并添加投票时，我唯一需要做的就是将其添加到 voteup(request) 或 votedown(request) 中的视图中：

视图.py

return HttpResponse(v.score)

这负责上下投票。当您将向上和向下箭头按钮混合时，条目保持不变，但投票在保存到数据库后会从视图中刷新。

使用刷新更改条目的键

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

视图.py

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

其中voting.html拆分并刷新文本和分数，并更改currentid：

投票.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）代码，希望它对某人有所帮助；

投票.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>

视图.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')
于 2014-08-11T17:17:44.493 回答