python - 为什么我的表单 URL 为所有帖子传递相同的主键？

Question

我有一个 HTML 模板，我在其中一一列出帖子，出于某种原因，

模板:

{% for post in posts %}
...
<form class='bookmark-form' method='POST' action="{% url 'add_bookmark' post.pk %}" 
          data-url='{{ request.build_absolute_uri|safe }}'> {% csrf_token %}
      <input type="text" value="{{post.pk}}" class="post-pk" hidden>
      <button type='submit'><img src="/img/bookmark.svg" alt=""></button>
</form>
...
{% endfor %}

Javascript:

  $('.bookmark-form').submit(function(event){
      event.preventDefault() 
      var $formData = $('.post-pk').val()
      var postData = {csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(), 'post-pk': $formData}
      var $thisURL = $('.bookmark-form').attr('data-url') || window.location.href 
      var form_action =  $('.bookmark-form').attr('action')
      console.log($formData)
      $.ajax({
          method: "POST",
          url: form_action,
          data: postData,
          success: function (data) {console.log(data)},
          error: function(data) {console.log("Something went wrong!");}
      })
      return false;
  })

Views.py添加书签功能

def add_bookmark(request, pk):
    if request.method=='POST' and request.is_ajax():
        post = Post.objects.get(pk=pk)
        print(pk)
        user = request.user 
        user.bookmarks.add(post)
        user.save()
        print(user.bookmarks.all())
        return JsonResponse({'result': 'ok'})
    else:
        return JsonResponse({'result': 'nok'})

HTML 渲染页面:

无论我点击哪个书签按钮，我总是在终端和控制台日志中得到相同的输出。

终端:

10
<QuerySet [<Post: Hogwarts, a History>, <Post: The Truth: My Parents are Dentists>, <Post: How to Organize Money: An Easy 10000 Steps>, <Post: Reallllllllly Old Post>, <Post: My First Serious Post>]>

控制台日志:

10
{'result': "ok"}

其中 10 是“我的第一篇严肃帖子”帖子的主键。我似乎找不到为什么我得不到 10 以外的任何其他主键的原因。

Answer 1

您的问题是您选择的表单数据不在提交它的表单范围内；

试试这个:

var $formData = $(this).val()

您必须像这样更改所有选择

编辑: 解释一下，当您按类选择时，jquery 会获取与您提供的类匹配的第一个元素的值。这就是为什么您始终获得相同数据的原因，它采用了第一个数据的值。

当您想要查找由事件触发的值时，使用 this 关键字很有用，因为这将保持事件的范围。您可以使用 $(this).find('.eg') 或 $(this).closest('.eg') 访问变量