如何在特定的 div 上应用 ajax 功能？

Question

在一个简单的论坛应用程序中，我有一个包含多个帖子的主题页面。在每个帖子上都有像这样的小部件 div：

<ul>
    <li>
        <p id="plike_count{{post.id}}"> {{  post.likes }}</p> 
    </li>

    <li>
            {% if user.is_authenticated %}
                <span data-type=" post" title="Like">       {% csrf_token %}
              <i class="thumbs-up" id="likep" name="{{ post.id}}"> </i>           
            {% endif %}
    </li>

</ul>

这里是 ajax Like sn-p，它应该捕获每个 Like 并更新 Like 计数：

$(function(){
$('#likep').click(function(){
      $.ajax({
               type: "POST",
               url: "/forum/post/like/",
               data: {
               'post_id': $(this).attr('name'), 
               'csrfmiddlewaretoken': '{{csrf_token}}'
               },


               success: plikeSuccess,
               dataType: 'html'

                });
    });

});
function plikeSuccess(data, textStatus, jqXHR)
{
    $('#plike_count').html(data);    
}

当只有一个帖子/div 可以使用但我不知道如何概括多个帖子的代码时，非常相似的 ajax 代码可以正常工作。

那么问题是如何在ajax中制作一个对应plike_count{{post.id}}的id呢？

我尝试过$('#plike_count'.conc(post_id)).html(data); 而不是$('#plike_count').html(data);，但没有成功。

Answer 1

使用

$(function(){
    $('#likep').click(function(){
        var _self = this;
        $.ajax({
           type: "POST",
           url: "/forum/post/like/",
           data: {
           'post_id': $(this).attr('name'), 
           'csrfmiddlewaretoken': '{{csrf_token}}'
        },
        success: function (data, textStatus, jqXHR)
        {
            $("#plike_count"+$(_self).attr('name')).html(data);    
        },
        dataType: 'html'

        });
    });
});

Answer 2

您正在寻找连接字符串的 + 运算符的神奇之处：

"a" + b

Answer 3

诀窍是在 ajax 回调中使用原始点击事件的上下文。

我们通过在绑定上下文的点击处理程序中创建一个变量来做到这一点。另请注意，我们使用了所有 jQuery ajax 方法都返回一个 Promise 对象这一事实。

我们没有将命名函数传递给成功选项，而是在 Promise 上调用 .done 方法。很多人会说，在全局命名空间中为 jQuery 回调创建命名函数是一个巨大的反模式。

请注意，我们还使用了更结构化的 html，以便我们将喜欢的内容视为可重用的代码模块。

$('.like').on('click', function(e){
  var $btn = $(this);
  var promise = $.post({
    url: $btn.attr('href'),
    data: {
      id: $btn.data('id'),
      csrfmiddlewaretoken: '{{csrf_token}}'
    },
    dataType: 'html'
  });
  promise.done(function(jqXHR){
    $btn.parents('.like-module')
       .find('.like-counter')
       .html(jqXHR.responseText());
  });
  e.preventDefault(); // prevent following link.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
  <aside class="like-module">
    <div class="like-counter">0</div>
    <a href="/forum/post/like/" class="like" data-id="{{ post.id }}">like</div>
  </aside>
</div>

<!-- more posts --!>

已添加。

另外我相信更 RESTful 的设计应该是：

POST /forum/posts/:id/likes # to like a post
DELETE /forum/posts/:id/likes # to unlike a post

POST /forum/post/likes 闻起来像一个过程，而不是作用于资源的东西。