web-dev-qa-db-ja.com

DjangoのjQuery / AjaxでPOSTを使用するにはどうすればよいですか？

POST DjangoでjQuery/AJAXを使用してデータを取得しようとしており、問題が発生しています。以下のコードを実行して[テスト]ボタンをクリックすると、ページ全体が再びリロードされますが、これは私が望んでいることではありません（だからAJAXを使用しています）。

また、AJAXリクエストがDjangoビューに到達していることを確認できません。

EDIT： 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)

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

何かアドバイス？

jquerypythonajaxdjangopost
14
sharataka

_return false;_が間違っています。 .submit()関数の最後にある必要があります。したがって、1行上に移動します。

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

});
_

UPDATE：

問題について_POST /edit_favorites/ HTTP/1.1" 403 2294_。あなたの問題に似ているこの投稿を確認してください：

11
Muthu Kumaran

次の方法がうまくいきました。そして、私もあなたを助けることを望みます。

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)
5
Zhengquan Feng

ここで行われているのは、HTMLフォームを送信すると、フォームのデータを<form>のaction属性に送信することです。 JavaScriptでフォームの送信イベントをサブスクライブしますが、action属性に従うというフォームのデフォルトの動作を無効にすることはありません。 jQueryでは、イベント引数でpreventDefaultメソッドを呼び出し、falseを返すことでその動作を変更できます（preventDefaultを呼び出した場合、falseは必要ではありませんが、確認する方が良いでしょう...）：

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

[〜＃〜] edit [〜＃〜]

エラーに関しては、あなたのエラーはあまり役に立ちませんが、CSRFを検証しないという予感があります。その詳細な説明 here 。ただし、クイックフィックスは、jQueryに加えて this ファイルを含め、ビューに ensure_csrf_cookie デコレーターを追加するだけです。

4
miki725