Django, Jquery Ajax;投票系统不工作，正在刷新分区
Django,Jquery,Ajax; refreshing div for voting system not working?
我有一个工作的django投票系统，使用上下键在数据库中的条目。
我需要{{条目。在页面上刷新Score}}，而不需要重新加载，因为页面上会有其他条目。{{条目。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):76在voting.html是:$。Get ("/voteup/"，参数).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
我刚和大学的一位博士生开了个会，他让我找到了正确的方向。
我遇到的基本问题是关于使用Jquery和Ajax的哲学，我发现很难从手册和在线支持中收集到一些东西，我发现它们在简单任务的基础上是不透明的。为此，我将在这里展示最终代码，希望它能帮助人们开始使用类似的简单投票系统。
感谢在Django中使用JQuery和AJAX刷新一个div重载整个页面在Django的AJAX ?如何在Django模板中使用Jquery/Ajax正确刷新一个div通过Jquery Ajax调用将值列表传递给Django视图
不更改条目的投票刷新(按钮mashashing)
我的主要问题是我为url和数据做了什么。原来是我想错了。在我的例子中，数据是从视图.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
在投票时刷新分数。上述代码中的Span允许我访问分数:
<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))
Which voting.html拆分和刷新文本和分数，并更改currentid:
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;}
这就是主要的变化。我在下面附上了完整的代码，希望它能帮助到一些人;
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')
相关文章：
- 刷新后，setTimeout将工作或不工作
- .html(）不会'页面更改或刷新时无法工作
- AngularJS控制器没有'第一次刷新页面后无法工作
- .addClass不工作(刷新时被删除）
- Javascript don'刷新页面后无法工作-为什么
- Kml层在刷新后工作正常，但给定typeError:无法读取属性getMap.第一次加载时
- jQuery AJAX刷新没有'不能在iPhone上工作
- Javascript在刷新后停止工作
- 页面刷新时脚本无法正常工作
- 为什么 jquery toggle(） 方法在页面不刷新的情况下无法正常工作
- ngCookie在我刷新页面后无法正常工作
- Angular + requireJS:快速刷新页面会导致页面在 Chrome 中停止工作
- Jquery 日期选择器仅在页面刷新后工作
- 将公司名称绑定到更新面板中的下拉列表，自动完成文本框工作，但每次页面刷新时
- 防止刷新后返回不工作
- 轮播在初始重定向时中断，但在刷新时工作正常
- Javascript仅在第一次刷新后工作
- Javascript在页面刷新后工作，不知道解决方案
- JQuery 函数在页面加载时未触发，它仅在我刷新页面或再次重新访问同一页面后才能工作
- Rails 应用程序 - jQuery Document.ready在单击链接时不调用，但在新选项卡中打开或刷新时工作
