19

Django で jQuery/AJAX を使用してデータを POST しようとしていますが、問題が発生しています。以下のコードを実行して「テスト」ボタンをクリックすると、ページ全体が再度読み込まれますが、これは望ましくありません (これが 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;
  });
});

何かアドバイス？

4

3 に答える 3

13

見当違い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
  });

});

アップデート：

問題についてPOST /edit_favorites/ HTTP/1.1" 403 2294。問題に似たこの投稿を確認してください。

于 2012-11-20T02:31:47.570 に答える
6

次の方法でうまくいきました。そして私もあなたを助けてくれることを願っています。

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)
于 2016-04-24T03:18:57.563 に答える
4

ここで何が起こっているかというと、HTML フォームを送信すると、フォームのデータが のaction属性に送信されます<form>。actionJavaScript では、フォームの送信イベントをサブスクライブしますが、属性に従うというフォームのデフォルトの動作を無効にすることはありません。preventDefaultjQuery では、 event 引数で method を呼び出して戻ることで、その動作を変更できますfalse( を呼び出す場合はpreventDefault、返すfalse必要はありませんが、確認した方がよいでしょう...):

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

編集

エラーに関しては、あなたのエラーはあまり役に立ちませんが、CSRFを検証していないという予感があります。それについてのより詳細な説明はこちらです。ただし、簡単な修正は、jQuery に加えてこのensure_csrf_cookieファイルをインクルードし、ビューにデコレータを追加することです。

于 2012-11-20T02:31:38.887 に答える