Как вы используете Ajax с Django для отправки формы без перенаправления / обновления, а также при вызове функции views.py?

Question

Я хотел бы создать систему для создания закладок для постов, где будет страница прокрутки постов для прокрутки вниз, и, если вам нравится конкретная, вы можете нажать на кнопку, чтобы сохранить ее в закладках. Я целый день искал решение, которое позволило бы мне сохранить сообщение в закладках пользователя, но при этом не обновлять и не перенаправлять, но мне удалось найти только методы, которые решают одну проблему за раз, а не обе. Меня не интересует изменение самого представления шаблона, а скорее просто сохранение данных в базе данных.

Мой код шаблона:

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

Мой Ajax Код:

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

My Views.py Функция для сохранения закладки:

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

Текущий результат заключается в том, что страница не перезагружается / не перенаправляется, но никогда не вызывает функцию add_bookmark.

Вы, вероятно, можете сказать, что я довольно плохо знаком с Ajax. Может ли кто-нибудь пролить свет на то, как я могу достичь обеих целей одновременно?

Редактировать: Обработано HTML

Журнал консоли (не полностью уверен, почему он регистрирует весь файл HTML для данных):

Answer 1

Вы используете неверный URL для отправки. Вы должны использовать атрибут action, а не data-url.

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

Если ваш HTML отличается, вам, в основном, нужно извлечь URL-адрес где-то еще. Вы можете даже жестко закодировать путь представления в функции AJAX.

$.ajax({
    method: "POST",
    url: '/add_bookmark', # or whatever your URL IS
    data: postData,
    success: function (data) {console.log(data)},
    error: function(data) {console.log("Something went wrong!");}
})