如何在 Django 中使用 jQuery/Ajax 发布？

Posted 2023-02-23

【中文标题】如何在 Django 中使用 jQuery/Ajax 发布？

【英文标题】：How do I POST with jQuery/Ajax in Django?

【发布时间】：2012-11-08 01:52:14

【问题描述】：

我正在尝试在 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;
  );
);

有什么建议吗？

【问题讨论】：

视图中的断点；视图代码正在运行吗？ ajax 成功处理程序中的断点；它在运行吗？添加ajax错误处理程序；在那里放断点；它在运行吗？此外，2 个随机附注：您可以使用 $('#test').serializeArray()，建议您只捕获您想要的 url：url(r'^edit_favorites/$', ...（没有 $ 您捕获任何以该开头的 url）。

【参考方案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 post request

【讨论】：

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

@sharataka 看看这个，***.com/questions/12744159/django-jquery-post-request

我相信这是因为这就是我在 urlconf 中的内容。

看起来，您需要在 ajax 调用中包含一个 CSRF（跨站请求伪造）令牌。

@MuthuKumaran - 我知道可以将 ajax POST 请求发送到 不同于用于呈现表单的视图 最初。为此，我尝试了函数视图来发布表单数据（serialized），但不知何故，数据没有发布到数据库中。我可以在 console 中看到序列化的表单数据，但无法POST 将其发送到数据库。您是否可以指出一个最小示例，说明我正在努力实现的目标？

【参考方案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)

【讨论】：

HttpResponse的JsonResponse是否有要求

【参考方案3】：

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

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

编辑

至于错误，您的错误不是很有帮助，但我有一种预感，您没有验证 CSRF。更详细的解释here。然而，快速修复只是在您的 jQuery 之外包含 this 文件，并将 ensure_csrf_cookie 装饰器添加到您的视图中。

【讨论】：

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

文本是否更新为<h2>Contact Form Submitted!</h2>？在 firebug 中你有任何错误吗？

我没有使用 firebug，但我在控制台中看到“POST /edit_favorites/ HTTP/1.1”403 2294...这有助于排除故障吗？

不是真的，但我对 CSRF 有预感。检查答案中的编辑。