像Ajax按钮一样

时间:2017-12-07 18:02:52

标签: python ajax django python-3.x

我正在尝试使用ajax创建一个类似的按钮。

这是我的架构:

models.py

class Comentario (models.Model):
    titulo = models.CharField(max_length=50)
    texto = models.CharField(max_length=200)
    autor = models.ForeignKey (Perfil, null=True, blank=True, on_delete=models.CASCADE)
    fecha_publicacion = models.DateTimeField(auto_now_add=True)
    tag = models.ManyToManyField(Tags, blank=True)
    slug = models.SlugField(null=True)
    likes = models.ManyToManyField(Perfil, blank=True, related_name="likes")

    def __str__(self):
        return (self.titulo)

    @property
    def total_likes(self):
        return self.likes.count()

    def save(self, *args, **kwargs):
        self.slug = slugify(self.titulo)
        super(Comentario, self).save(*args, **kwargs)

views.py

def like(request):
    if request.method == 'POST':
        perfil = request.user
        slug = request.POST.get('slug', None)
        comentario = get_object_or_404(Comentario, slug=slug)

        if comentario.objects.filter(id=user.id).exists():
            comentario.likes.remove(user)

        else:
            comentario.likes.add(user)


    contexto = {'likes_count': comentario.total_likes }
    return HttpResponse(json.dumps(contexto), content_type='application/json')

urls.py

url(r'^like$', login_required(like), name='like'),

HTML

<input type="button" id="like" name="{{ company_slug }}" value="Like" />
<script>
$('#like').click(function(){
      $.ajax({
               type: "POST",
               url: "{% url 'home:like' %}",
               data: {'slug': $(this).attr('titulo'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
               dataType: "json",
               success: function(response) {
                      alert(response.message);
                      alert(' likes count is now ' + response.likes_count);
            },
                error: function(rs, e) {
                       alert(rs.responseText);
            }
      }); 
})
</script>

当我按下按钮时,它没有做任何事情。控制台告诉我:

POST htt jquery.min.js:4 p:/127.0.0.1.8000/home/like/404(未找到)

和:http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

有什么问题?

3 个答案:

答案 0 :(得分:0)

<强>#1

我可以看到你使用jquery-3.2.1.slim.min.js。这个(超薄)版本不包括ajax模块!

https://blog.jquery.com/2017/03/16/jquery-3-2-0-is-out/

  

超薄构建

     

有时您不需要ajax,或者您更喜欢使用其中之一   专注于ajax请求的独立库。而且往往是   更简单地使用CSS和类操作的组合   你的网络动画。随着jQuery的常规版本   包括ajax和效果模块,我们发布了“苗条”版本   不包括这些模块。

#2

我可以使用错误的网址。 在 html 部分,{% url 'home:listar' %} urls.py 仅包含name='like'

答案 1 :(得分:0)

将jQuery脚本放在ajax代码之前:

<script src="jquery.js"></script>
$('#like').click(function(){
      $.ajax({
               type: "POST",
               url: "{% url 'home:listar' %}",
               data: {'slug': $(this).attr('name'), 'csrfmiddlewaretoken': '{{ csrf_token }}'},
               dataType: "json",
               success: function(response) {
                      alert(response.message);
                      alert(' likes count is now ' + response.likes_count);
            },
                error: function(rs, e) {
                       alert(rs.responseText);
            }
      }); 
})
</script>

答案 2 :(得分:0)

感兴趣的函数(postId){ $.ajax({ 类型:“帖子”, url:"/userInterested?postId="+postId, 数据:postId, 成功:功能(数据){ 控制台日志(数据); 如果(数据=='1'){ $("#8").addClass("active");
}; } });
}