一尘不染

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

django

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

有什么建议吗?


阅读 417

收藏
2020-03-27

共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
  });

});
2020-03-27