如何在 Django 中使用 jQuery/Ajax 进行 POST？

问题描述：

我正在尝试使用 Django 中的 jQuery/AJAX 发布数据，但遇到了麻烦。当我运行下面的代码并单击“测试”按钮时，整个页面再次重新加载，这不是我想要的（这就是我使用 AJAX 的原因）。

我也无法确认 AJAX 请求是否到达 Django 视图。

编辑：我已对 return false 和 进行了编辑event.preventDefault()。新页面未加载，但我仍然无法在字段中看到更新后的文本<div id='message'>。我不确定数据是否已发送。我在控制台中看到：

POST /edit_favorites/ HTTP/1.1" 403 2294

视图.py：

from django.shortcuts import render_to_response
from django.http import HttpResponse

def edit_favorites(request):
    if request.is_ajax():
        message = "Yes, AJAX!"
    else:
        message = "Not Ajax"
    return HttpResponse(message)

urls.py：

url(r'^edit_favorites/', 'edit_favorites'),

HTML：

<form method='post' id='test'>
  <input type="hidden" value="video34"/>
  <input type='submit' value='Test button'/>
  <div id='message'>Initial text</div>
</form>

JavaScript的：

$(document).ready(function () {
  $("#test").submit(function (event) {
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "/edit_favorites/",
      data: {
        'video': $('#test').val() // from form
      },
      success: function () {
        $('#message').html("<h2>Contact Form Submitted!</h2>")
      }
    });
    return false;
  });
});

有什么建议吗？

解决方案 1：

放错了return false;。它应该在函数末尾.submit()。因此将其向上移动一行：

$(document).ready(function () {
  $("#test").submit(function (event) {
    $.ajax({
      type: "POST",
      url: "/edit_favorites/",
      data: {
        'video': $('#test').val() // from form
      },
      success: function () {
        $('#message').html("<h2>Contact Form Submitted!</h2>")
      }
    });
    return false; //<---- move it here
  });

});

更新：

关于这个问题POST /edit_favorites/ HTTP/1.1" 403 2294。请查看这个与你的问题类似的帖子：

• Django jQuery 发布请求

解决方案 2：

以下方法对我很有效。我希望也能帮助你。

from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse

@csrf_exempt
def edit_favorites(request):
    if request.is_ajax():
        message = "Yes, AJAX!"
    else:
        message = "Not Ajax"
    return HttpResponse(message)

解决方案 3：

这里发生的事情是，当您提交 HTML 表单时，它会将表单的数据发送到action的属性<form>。在您的 javascript 中，您订阅了表单的提交事件，但是您从未禁用表单的默认行为，即遵循action属性。在 jQuery 中，您可以通过preventDefault在事件参数上调用方法并返回来修改该行为false（如果您调用preventDefault，则返回false不是必需的，但最好确保...）：

$(...).submit(function(e) {
    e.preventDefault();
    ...
    return false;
});

编辑

至于错误，您的错误没有什么帮助，但我有预感您没有验证 CSRF。更多详细的解释请见此处。不过，快速修复方法是除了 jQuery 之外还包含此ensure_csrf_cookie文件，然后将装饰器添加到视图中。