Django中一个非常非常基本的JavaScript按钮

Question

我知道一堆Django，HTML和CSS，但我总是在JavaScript中做任何事情（只做了一些jQuery）。

我想在一个简单的网站上使用它，暂时按下按钮，其外观和相关数据库更改而不重新加载页面。我想要一个简单的例子，使用Django和一些jQuery开始学习它。

让我们使用Twitter中的“喜欢/喜欢”按钮作为示例。

按钮必须

• 让用户
  • 最喜欢的帖子
  • 保存选择（即将其存储在相关的MySQL数据库中）
• 更改按钮的文字和外观，而不加载新页面

我该怎么做？

以下是启动它的样板代码：

Django的

### 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的情况下执行此操作，您最喜欢的按钮将是表单中的提交按钮，该按钮将提交到由Django视图函数处理的URL，从而使所需的数据库发生更改。

要通过JavaScript执行此操作，请将表单提交替换为使用XMLHTTPRequest代替执行POST的JavaScript代码。