Ajax/jQuery Django 刷新类元素

Question

我无法想出更合适的标题，但我的问题如下：

我会生成一个帖子列表，其中包含喜欢和不喜欢它们的选项，具体取决于它们是否已经被喜欢。

{% for post in posts %}
        <hr>
        <strong>{{ post.owner }}</strong> </br>
        {{ post.content }} </br>
        <i>{{ post.post_date }}</i> </br>
        <form action="{% url 'like' %}" method="post" class="likeform">
            {% csrf_token %}
            <input type="hidden" id="post_id" value="{{ post.id }}">
            {% if post.id not in liked_posts_ids %}
                <button type="submit" >Like</button>
            {% else %}
                <button type="submit" >Dislike</button>

            {% endif %}
        </form>
    {% endfor %}

现在，就像所有使用此类内容的网站一样，我不想在每次有人点击喜欢/不喜欢按钮时刷新整个网站。

我当前的 JS 如下所示：

 $(document).on('submit','.likeform',function(e){
        e.preventDefault();

        $.ajax({
            type:'POST',
            url:'{% url 'like' %}',
            data:{
                post_id: $('#post_id').val(),
                    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                },
        success:function(){
            $(".likeform").load(" .likeform > *");
        }
    });

POST 请求工作正常，但 success:function()part 不能。它刷新所有按钮，这不是很好，但它也将所有按钮置于所有形式中。目前我的数据库中有 6 个帖子，在 $(".likeform").load(" .likeform > *"); 完成后，每个帖子下都有 6 个喜欢/不喜欢按钮。

如何只刷新按钮的正确实例，同时保留在 for 循环中生成的按钮？ 有没有办法利用#post_id来识别相关按钮？

Answer 1

由于您说您的页面上有多个这样的表单，请丢失input 上的id 属性并将其更改为name 属性。

<input type="hidden" name="post_id" value="{{ post.id }}">

id 必须是唯一的，如果出现多次则无效。而name 属性是输入元素的更好标识符。

在您的$.ajax 函数中，您需要从您提交的当前表单中获取值。在该表单中，您要选择所需的所有元素。

现在对于请求，您需要做一些不同的事情。该请求应该转到服务器上的一个函数，该函数使用我们发送的 id 更新这篇文章的值，如果它被喜欢或不喜欢。没有进一步的了。然后，它应该作为响应发送一个文本字符串，这将是提交按钮的新文本值。

在您的success 处理程序中，您需要将接收到的文本字符串设置为提交表单中的按钮。所以当你点击Like时，服务器会发送请求，帖子会在服务器上被点赞，服务器会发回Dislike，也就是现在按钮上的文字。当点击不喜欢它应该做同样的事情，不喜欢帖子并返回Like字符串。

$(document).on('submit', '.likeform', function(e) {
  e.preventDefault();

  // Get the currently submitted form and find the inputs
  // inside the form necessary to send the data with.
  var $form = $(this); 
  var $postId = $form.find('input[name="post_id"]');
  var $csrf = $form.find('input[name="csrfmiddlewaretoken"]');
  var $button = $form.find('button');

  $.ajax({
    type: 'POST',
    url: '{% url 'like' %}',
    dataType: 'text',
    data: {
      post_id: $postId.val(),
      csrfmiddlewaretoken: $csrf.val()
    },
    success: function(response) {

      // Replace the current text of the button with a new
      // text based on if it was liked or disliked.
      $button.text(response);

    }
  });

});