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

Question

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

我也无法确认AJAX请求是否进入Django视图。

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

POST /edit_favorites/ HTTP/1.1" 403 2294

views.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;
  });
});

有什么建议？

Answer 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发布请求

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

Answer 3

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

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

编辑

至于错误，你的错误不是很有帮助，但我有一种预感，你不会验证CSRF。 的越来越详细的解释在这里 。 然而，快速修复只是包含此文件以及jQuery，并将ensure_csrf_cookie装饰器添加到您的视图中。