Как запустить метод внутри модели при запуске JavaScript actionListener? - PullRequest
Новая
       6

Как запустить метод внутри модели при запуске JavaScript actionListener?

0 голосов
/ 11 апреля 2019

У меня есть следующая модель: 

class Post(models.Model):
    author = models.ForeignKey('auth.User', on_delete=models.CASCADE)
    title = models.CharField(max_length = 200)
    text = models.TextField()
    created_date = models.DateTimeField(default = timezone.now)
    likes = models.IntegerField(default=0)
    tags = models.CharField(max_length = 50, default = '' )

    def process_likes(self):
        like = self.likes = F('likes')+1
        like.save()

    def split_tags(self):
        return self.tags.split()

    def get_absolute_url(self):
        return reverse('blog:post_list')

    def __str__(self):
        return self.title

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

<script>
    let corazon = document.querySelector('.icon-heart-empty');
    corazon.addEventListener('click', ()=>{
        corazon.classList.toggle('icon-heart');
    });
</script>

Здесь я переключаю класс моей иконки, чтобы показать, нажата ли она или нет, но как я могу вызвать метод process_like, используя чистый JavaScript?

1 Ответ

0 голосов
/ 11 апреля 2019

Вам нужно будет использовать AJAX вызов, чтобы отправить запрос POST на ваш сервер, а затем вернуть ответ на вашу HTML-страницу.

Пример:

вид 

def process_like(request):
    post_id = request.POST['post_id']
    post = Post.objects.get(id=post_id)
    post.process_likes()
    return JsonResponse({"message": "Success"})

URLs 

urlpatterns = [
    ...
    path('process_like/', views.process_like, name="process_like")
    ...
]

HTML / JS 

<div class="post" data-post-id="{{post.id}}">this is the post</div>

<script>
var posts = document.querySelectorAll('.post')

posts.forEach(post => {
    post.addEventListener('click', e => {
        e.preventDefault()
        var post_id = post.getAttribute('data-post-id')
        var config = {
          method: "POST",
          body: {post_id: post_id}
          headers: {
              "X-CSRFToken": "{{ csrf_token }}",
              "Accept": "application/json",
              "Content-Type": "application/json"
          },
        }

        fetch('{% url "process_like" %}', config)
        .then(response => response.json())
        .then(data => console.log(data))
    })
})
</script>

Или, если вы используете jQuery 

<script>
$('.post').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    var post_id = $this.data('post-id');

    $.ajax({
        method: "post",
        url: "{% url 'process_like' %}",
        data: {csrfmiddlewaretoken: "{{ csrf_token }}", post_id: post_id}
    }).done(function (response) {
        console.log(response)
    })
})
</script>
...