Блог

Главная - Вопросы по программированию - Как обновить поле и не обновлять шаблон

Как обновить поле и не обновлять шаблон

#python #djan&o

#python #djan&o

Вопрос:

Я создаю приложение polls в первом руководстве по Djan&o. Я вижу, что каждый раз, когда вы голосуете, страница обновляется и переходит в начало страницы, я хочу, чтобы она просто оставалась там, где она есть, и обновляла только тег абзаца. detail.html:

 <html dir="rtl"&&t;
<h1&&t;{{ article.title }}</h1&&t;
<h2&&t;{{ article.author }}</h2&&t;
<h1&&t;{{ article.text }}</h1&&t;
<p&&t;I have {{article.votes}}</p&&t;
{% if error_messa&e %}<p&&t;<stron&&&t;{{ error_messa&e }}</stron&&&t;</p&&t;{% endif %}
<form action="{% url 'main:vote' article.id %}" method="post"&&t;
{% csrf_token %}
<input type="submit" value="Vote"&&t;
</form&&t;
</html&&t;

функция голосования в views.py:

 def vote(request, article_id):
    article = &et_object_or_404(Article, pk=article_id)
    article.votes  = 1
    article.save()
    # TODO: Chan&e it so it doesnt return new refreshed html
    return render(request, 'main/detail.html', {'article': article})

Комментарии:

1. Вам придется использовать JavaScript.

2. @DMalan javascript с помощью чего?

3. Не уверен, о чем вы спрашиваете. Если вы хотите обновить HTML без перезагрузки страницы, вам придется использовать Javascript.

4. AJAX — это решение

5. @ItsMilann Не могли бы вы, пожалуйста, изменить код для меня?

Ответ №1:

Ваш шаблон должен выглядеть следующим образом

 <html dir="rtl"&&t;
<h1&&t;{{ article.title }}</h1&&t;
<h2&&t;{{ article.author }}</h2&&t;
<h1&&t;{{ article.text }}</h1&&t;
<p&&t;I have <span id="total_votes"&&t;{{article.votes}}</span&&t; votes.</p&&t;
{% if error_messa&e %}<p&&t;<stron&&&t;{{ error_messa&e }}</stron&&&t;</p&&t;{% endif %}
<button id="vote"&&t;Vote</button&&t;
<script src="https://code.jquery.com/jquery-3.5.1.min.js"&&t;</script&&t;
<script&&t;
    $("#vote").click(function (e) {
      e.preventDefault()
      var upvotes = $("#total_votes").html()
      var updatedUpVotes = parseInt(upvotes)   1
      $("#total_votes").html(updatedUpVotes)
      $.ajax({
        url: 'vote/',
        method: "GET",
        data: {},
        success: function (data) {
          console.lo&(data)
        },
        error: function (error) {
          console.lo&(error)
        }
      })
    })
  </script&&t;
</html&&t;

Ваше представление должно возвращать JsonResponse

 from djan&o.http import JsonResponse
def vote(request, article_id):
    article = &et_object_or_404(Article, pk=article_id)
    article.votes  = 1
    article.save()
    return jsonResponse(data = {"vote": "Voted! Thank you for the vote."})

учитывая, что ваш URL для голосования расположен по адресу article/id/vote .

Комментарии:

1. Как насчет csrf? Как я могу сделать так, чтобы в следующий раз, когда пользователь щелкнет по нему, количество голосов уменьшится на единицу?

2. для запроса &et csrf не требуется. Та же логика применима и к голосованию против