Джанго, JQuery, Аякс; обновление div для системы голосования не работает?

У меня только что была сессия с аспирантом в университете, и он направил меня на правильный путь.

Основная проблема, с которой я столкнулся, касалась философии использования Jquery и Ajax, которую мне было трудно почерпнуть из руководств и онлайн-поддержки, которые, как я обнаружил, непрозрачны в отношении самых основ для простых задач. С этой целью я представлю здесь окончательный код в надежде, что он поможет людям, начинающим с подобной простой системы голосования.

Благодаря обновить div в Django с помощью JQuery и AJAX Перезагрузить всю страницу в Ajax на Django? Как правильно обновить div с помощью Jquery/Ajax в шаблоне Django Передача списка значений в представление django с помощью вызова jQuery ajax По мелочам...

Обновление голосования без изменения записи (нажатие кнопок)

Моя главная проблема заключалась в том, что я сделал для URL-адреса и данных. Оказывается, у меня был не тот конец палки. Данные в моем случае возвращаются из представлений .get (я думал, что это идентификатор записи, который мне нужно передать для обновления), и мне не нужно было определять 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>

И единственное, что мне нужно было сделать, это добавить это к представлениям в голосовании (запрос) или голосовании (запрос), когда я обращался к моделям входа и добавлял голосование:

views.py

return HttpResponse(v.score)

Это заботится о голосовании вверх и вниз. Когда вы нажимаете кнопки со стрелками вверх и вниз, запись остается прежней, но голоса обновляются из представлений после сохранения в базе данных.

Ключ для изменения записи с обновлением

Чтобы изменить запись (на новую случайную запись), .get для клавиши со стрелкой вправо возвращает строку с идентификатором, текстом и оценкой случайной записи;

views.py

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

Какой файл голосования.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;}

Итак, основные изменения. Я включаю полный код ниже в надежде, что он кому-то поможет;

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')