Django Ajax кнопку «Мне нравится», используя Jquery?

Question

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

urls.py:

(r'^like/(\d+)/$',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 и обновленный счетчик показа без перезагрузки всей страницы. Нужна помощь. Спасибо.

Answer 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():

Answer 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, чтобы понять это правильно.

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