Очень, очень простая кнопка JavaScript в Django

Question

Я знаю кучу Django, HTML и CSS, но я почему-то не удосужился сделать что-нибудь в JavaScript (только сделал немного jQuery).

Я хочу использовать это на простом веб-сайте в настоящее время для нажатых кнопок, внешний вид и соответствующая база данных которых изменяются без перезагрузки страницы. Мне нужен простой пример использования Django и, возможно, некоторого jQuery, чтобы начать его изучение.

Давайте просто воспользуемся кнопкой «Избранное» или «Нравится», известной, например, из Twitter, например.

Кнопка должна

• Позвольте пользователю
  • любимый пост
  • сохранить выбор (т.е. сохранить его в соответствующей базе данных MySQL)
• Изменить текст и внешний вид кнопки без загрузки новой страницы

Как бы я поступил об этом?

Вот стандартный код для его запуска:

Джанго

### models.py
from django.db import models
from django.contrib.auth.models import User

class Post(models.Model):
    likes = ManyToManyField(User, null=True, blank=True, related_name="likes")

### views.py
def post(request, post_id):
    if request.method != 'POST':
        render(request, 'mytemplate.html',
                {'post': get_object_or_404(Post, pk=post_id)})
    else:
        # ...?

HTML-шаблон

<a class="favorite" href="#" title="Like this post">Like?<a>

Answer 1

Это не совсем "очень, очень просто".

Для начала, это Ajax, а не простой Javascript.Javascript сам по себе может изменить что-либо на странице, но вы хотите отправить что-то на сервер и получить ответ, что более сложно - не массово, но достаточно.

Обратите внимание, что вам действительно нужно что-то в вашемРазметка для идентификации понравившегося сообщения:

<a class="favorite" id="{{ post.id }}" title="Like this post">Like?</a>

$.ready(function() {
    $('.favorite').click(function() {
        var $this = $(this);
        var post_id = this.id;
        $.post('/like/' + id + '/', function() {
            $this.replaceWith("<span class='liked'>Liked</span>");
        });
    });
});

...

if request.is_ajax():
    post.likes.add(request.user)

Answer 2

Если бы вы делали это без JavaScript, вашей любимой кнопкой была бы кнопка отправки в форме, которая отправлялась на URL-адрес, обрабатываемый функцией просмотра Django, которая внесла необходимые изменения в базу данных.

Для этогочерез JavaScript вы заменяете отправку формы некоторым кодом JavaScript, который использует XMLHTTPRequest вместо POST.