时间戳

首页 > 解决方案 > 如何在 Django 中使用 Ajax 来提交表单而无需重定向/刷新，同时调用 views.py 函数？

python - 如何在 Django 中使用 Ajax 来提交表单而无需重定向/刷新，同时调用 views.py 函数？

问题描述

我想创建一个为帖子添加书签的系统，其中会有一页帖子可以向下滚动，如果您特别喜欢某个帖子，可以单击一个按钮将其保存到您的书签中。我整天都在寻找一种解决方案，该解决方案允许我将帖子保存到用户的书签，同时也不刷新/重定向，但我只设法找到一次解决一个问题的方法，而不是同时解决两个问题。我对更改模板视图本身不感兴趣，而只是将数据保存到数据库中。

我的模板代码：

<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>

我的阿贾克斯代码：

$('.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;
  })

我的 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

控制台日志（不完全确定为什么要记录整个 HTML 文件的数据）： 控制台日志

标签： pythonjquerydjangoajax

解决方案

您使用了错误的 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!");}
})

推荐阅读