如何在 ajax 函数中同时调用帖子 ID 和按钮 ID？

Posted 2023-02-19

【中文标题】如何在 ajax 函数中同时调用帖子 ID 和按钮 ID？

【英文标题】：How can I call post id and button id together in ajax function?

【发布时间】：2021-02-14 14:39:22

【问题描述】：

我问这个问题已经 2 天了，但仍然没有得到任何有用的答案，在这里我试图通过在按钮 ID 中添加帖子 ID 来为按钮提供唯一 ID，我不明白如何我可以在 ajax 函数中调用此按钮 ID。我尝试做的方式是错误的，所以当我点击按钮时什么都不返回。

% csrf_token %
     % for post in object_list.all %
     <div class="cardbox">
      <div class="cardbox-heading">
       <!-- START dropdown-->
       <div class="dropdown pull-right">
        <button class="btn btn-secondary btn-flat btn-flat-icon" type="button" data-toggle="dropdown" aria-expanded="false">
         <em class="fa fa-ellipsis-h"></em>
        </button>
        <div class="dropdown-menu dropdown-scale dropdown-menu-right" role="menu" style="position: absolute; transform: translate3d(-136px, 28px, 0px); top: 0px; left: 0px; will-change: transform;">
         <a class="dropdown-item" href="#">Hide post</a>
         <a class="dropdown-item" href="#">Stop following</a>
         <a class="dropdown-item" href="#">Report</a>
        </div>
       </div><!--/ dropdown -->
       <!-- END dropdown-->
       <div class="media m-0">
        <div class="d-flex mr-3">
         <a href="#"><img class="img-responsive img-circle" src="post.username.avatar.url" ></a>
        </div>
        <div class="media-body">
         <p class="m-0">post.username</p>
         <small><span>post.create_date|timesince</span></small>
        </div>
       </div><!--/ media -->
      </div><!--/ cardbox-heading -->
      <div class="cardbox-item">
       <a href="% url 'posts:post_detail_final' pk=post.pk slug=post.slug %" data-toggle="modal">
        <img class="img-responsive" src="post.image_data.url" >
       </a> 
      </div><!--/ cardbox-item -->
      <div class="cardbox-base">
       <ul>
            % for likes in post.likes.all %
                <li ><a href="% url 'profiles:detail' username=likes.username %"><img src="likes.userprofile.avatar.url" class="img-responsive img-circle" ></a></li>
            % endfor %  
       </ul>
      </div><!--/ cardbox-base -->
        <div class="cardbox-like">
            <ul>
                <li>
                    <span class="" id="like_count">post.likes.count</span>
                    <button class="btn btn-link text-dark p-0 border-0 btn-outline-light" id="like-buttonpost.id" value="post.id">
                    <i class="fa fa-heart"></i>
                    </button>
                </li>
                <li><a href="% url 'posts:post_detail_final' pk=post.pk slug=post.slug %"> <i class="fa fa-comments"></i> <span>post.comments.count</span></a></li>
            </ul>
        </div><!--/ cardbox-like -->                  
     </div><!--/ cardbox -->
     % endfor %   

jquery/ajax:

      <script>

 
  $(document).on('click', '#like-buttonpost.id', function (e) 
    e.preventDefault();
    $.ajax(
      type: 'POST',
      url: '% url "posts:like" %',
      data: 
        postid: $('#like-buttonpost.id').val(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
        action: 'post'
      ,
      success: function (json) 
        document.getElementById("like_count").innerhtml = json['result']
      ,
      error: function (xhr, errmsg, err) 
      
    );
  )
</script>

如果需要的代码多于评论会话中告诉我的代码，我将使用该信息更新我的问题。

【问题讨论】：

您似乎多次使用相同的 id（like-button）。在大多数计算学科中，ID 应该始终是唯一的。

如何给重复的 obj 赋予不同的 ID？

您可以使用一个类，或者，如果您确实需要使用一个 id，那么您可以通过在每个 id 的末尾添加一个数字来使其唯一。

但是如何将它添加到 ajax 调用中？

我的意思是，如果我在按钮 id 中添加帖子 ID，而不是如何在 ajax 调用中添加帖子 ID 和按钮 ID

【参考方案1】：

由于您多次使用相同的 id，您会遇到错误...您可以做的是简单地使用一个类，或者确保您在每次迭代中使用一个 unqiue id