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片段，应该为每个人提供封锁并更新类似的数量：

$(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

您正在寻找连接字符串的import os import pygame import pygame.mixer # Initialize the game pygame.init() pygame.mixer.init() # frequency, size, channels, buffersize print(os.listdir()) # ... some other stuff.... try: sound = pygame.mixer.Sound("low_click.wav") print('low_click.wav') sound.play() except pygame.error: pass运算符的奇迹：

['metronom_quintenzirkel.py', 'low_click.wav', 'data']

Answer 2

使用

$(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 3

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

我们通过在单击处理程序中创建一个绑定上下文的变量来完成此操作。另请注意，我们使用所有jQuery ajax方法返回promise对象的事实。

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

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

＆＃13;

$('.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.
});

＆＃13;

<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 --!>

＆＃13;

加。

此外，我相信更多RESTful设计将是：

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

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

如何在特定div上应用ajax函数？

3 个答案:

加。