Почему мой 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') для доступа к переменным