Блог

Главная - Вопросы по программированию - Кнопка Django ajax «нравится» с использованием Jquery?

Кнопка Django ajax «нравится» с использованием Jquery?

#django #jquery #django-templates #django-views

#django #jquery #django-шаблоны #django-просмотры

Вопрос:

Я хочу реализовать кнопку ajax «нравится», которая должна увеличить количество лайков, а не обновлять всю страницу. Я новичок в ajax, поэтому, пожалуйста, помогите.

urls.py:

 (r'^like/(d )/$',like),

Ниже приведен мой код просмотра для like:

 def like(request,feedno):
  feed=Feed.objects.get(pk=feedno)
  t=request.META['REMOTE_ADDR']
  feed.add_vote(t, 1)
  vote, created = Vote.objects.get_or_create(

          feed=feed,
          ip=t,
          )

  feed.likecount =1
  feed.save()
  if 'HTTP_REFERER' in request.META:
    return HttpResponseRedirect(request.META['HTTP_REFERER'])
  return HttpResponseRedirect('/')

Ниже мой html (например, div):

 <div class="like_abuse_box">
  <p>Likes:<b>{{vote.feed_set.count}}</b> ||
   <a class="like" href="/like/{{feed.id}}/">Like</a> | 
   <a class="abuse" href="/abuse/{{feed.id}}/">Abuse</a> || </p>
</div>

Какой код я должен включить, чтобы обновлять только этот конкретный div и отображалось обновленное количество лайков без перезагрузки всей страницы. Нужна помощь. Спасибо.

Ответ №1:

Не тестировал, хотя что-то подобное должно сработать. Редактировать: протестировано и работает, теперь для нескольких элементов на веб-странице

Javascript

 $("a.like").click(function(){
    var curr_elem = $(this) ;
    $.get($(this).attr('href'), function(data){
        var my_div = $(curr_elem).parent().find("b");
        my_div.text(my_div.text()*1 1);     
    }); 
    return false; // prevent loading URL from href
});

Представление Django

Вы можете добавить, является ли запрос Ajax с:

 if request.is_ajax():

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

1. Кажется, это работает. Она не обновляет всю страницу, но вводит некоторые nos, например, если голос равен 0, и я нажимаю, чтобы он заменил 0 на ‘11364’ во всех местах подсчета лайков. итак, все каналы получают это значение like (11364) и только после обновления они возвращаются к нормальному количеству лайков. почему это так? нужна помощь.

2. Вы уверены? Я отредактировал ее один раз, поскольку не было * 1 для преобразования текста в int. Она принимает число из <b>{{vote.feed_set.count}}</b> и увеличивает его на единицу после завершения запроса ajax.

3. на самом деле у меня есть like_abuse_box внутри каналов для цикла. итак, таких полей много. Итак, когда мне нравятся все остальные поля, голоса тоже меняются. и все они меняются на 6-значный номер, как указано ранее. проблема все еще сохраняется. Есть идеи, почему это так ..? Спасибо.

4. @berni Я пытался использовать написанный вами javascript, но у меня возникла проблема в том смысле, что javascript не работает. Когда я нажимаю кнопку, это простая операция, а не действие, выполняемое javascript. Я сделал именно так, как написано выше. Не могли бы вы помочь мне с этим

Ответ №2:

Первое: укажите идентификатор html-элемента, в который нужно ввести содержимое.

 <div class="like_abuse_box">
  <p>Likes:<b id="like_count">{{vote.feed_set.count}}</b> ||
   <a class="like" href="/like/{{feed.id}}/">Like</a> | 
   <a class="abuse" href="/abuse/{{feed.id}}/">Abuse</a> || </p>
</div>

во-вторых, по вашему мнению, вам нужно вернуть последнее количество лайков. Вы не можете просто локально обновить количество, поскольку есть вероятность, что кто-то другой также обновил количество «нравится».

Наконец. на вашей странице включите jquery 

 $("a.like").bind("click", function(){
    var link = $(this).attr("href");
    $.get(link, function(data) {
        $(this).parent("div").children('b#like_count').html(data);
    });
});

Я не совсем уверен в родительском дочернем селекторе, чтобы перейти от гиперссылки, на которую нажата ссылка, к соответствующему количеству лайков. Возможно, вам придется поиграть с jQuery selector, чтобы сделать это правильно.

Кроме того, если вы используете POST для своего просмотра, замените $.get на $.post