我有一个工作的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(" / voteup /",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 }} {{ 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
答案 0 :(得分: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')