web-dev-qa-db-ja.com

方法POST a Django form with AJAX&jQuery

Django AJAXフォームについてはたくさんのチュートリアルをチェックしましたが、それぞれがあなたにそれを行う方法を教えてくれます。 AJAXを使用したことがないため、少し混乱しています。

「note」というモデルとそのモデルがあり、テンプレート内では、note要素がstop()シグナル(jQuery Sortablesから)を送信するたびにDjango=オブジェクトを更新する必要があります。

私の現在のコード:

views.py

def save_note(request, space_name):

    """
    Saves the note content and position within the table.
    """
    place = get_object_or_404(Space, url=space_name)
    note_form = NoteForm(request.POST or None)

    if request.method == "POST" and request.is_ajax:
        msg = "The operation has been received correctly."          
        print request.POST

    else:
        msg = "GET petitions are not allowed for this view."

    return HttpResponse(msg)

JavaScript:

function saveNote(noteObj) {
    /*
        saveNote(noteObj) - Saves the notes making an AJAX call to Django. This
        function is meant to be used with a Sortable 'stop' event.
        Arguments: noteObj, note object.
    */
    var noteID = noteObj.attr('id');

    $.post("../save_note/", {
        noteid: noteID,
        phase: "Example phase",
        parent: $('#' + noteID).parent('td').attr('id'),
        title: $('#' + noteID + ' textarea').val(),
        message: "Blablbla",
    });
}

現在のコードは、テンプレートからデータを取得し、ターミナルに出力します。このデータをどのように操作できるかわかりません。 DQueryにデータを送信するためにjqueryformsを介してデータを管理する人々を見てきました。

AJAXによって送信されたデータにアクセスし、noteオブジェクトを更新するにはどうすればよいですか?

69
Oscar Carballal

JQueryを使用しているので、次を使用しないのはなぜですか。

<script language="JavaScript">
    $(document).ready(function() {
        $('#YOUR_FORM').submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response) { // on success..
                    $('#DIV_CONTAINING_FORM').html(response); // update the DIV 
                }
            });
            return false;
        });
    });
</script>

[〜#〜] edit [〜#〜]

コメントで指摘されているように、時には上記が機能しないことがあります。以下を試してください:

<script type="text/javascript">
    var frm = $('#FORM-ID');
    frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                $("#SOME-DIV").html(data);
            },
            error: function(data) {
                $("#MESSAGE-DIV").html("Something went wrong!");
            }
        });
        return false;
    });
</script>
113
Sevenearths

あなたの場合、変数の名前を使用してPOSTリクエストでデータにアクセスできます:

request.POST["noteid"]
request.POST["phase"]
request.POST["parent"]
... etc

Request.POSTオブジェクトは不変です。値を変数に割り当ててから、操作する必要があります。

このJQueryプラグイン を使用することをお勧めします。これにより、通常のHTMLフォームを作成し、AJAXに「アップグレード」することができます。コードの至る所に$ .postを配置するのは面倒です。

また、Firebugのネットワークビュー(Firefoxの場合)またはGoogleの開発者ツールChromeを使用して、送信されたものを表示できるようにしますAJAX呼び出し。

9
Gerardo Curiel

注意すべき点は、フォームをHTMLとしてモーダルに切り取って返す場合です。

Views.py

@require_http_methods(["POST"])
def login(request):
form = BasicLogInForm(request.POST)
    if form.is_valid():
        print "ITS VALID GO SOMEWHERE"
        pass

    return render(request, 'assess-beta/login-beta.html', {'loginform':form})

切り取られたhtmlを返す単純なビュー

Form html Snipped

<form class="login-form" action="/login_ajx" method="Post"> 
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="header">Authenticate</h4>
  </div>
  <div class="modal-body">
        {%if form.non_field_errors %}<div class="alert alert-danger">{{ form.non_field_errors }}</div>{%endif%}
        <div class="fieldWrapper form-group  has-feedback">
            <label class="control-label" for="id_email">Email</label>
            <input class="form-control" id="{{ form.email.id_for_label }}" type="text" name="{{ form.email.html_name }}" value="{%if form.email.value %}{{ form.email.value }}{%endif%}">
            {%if form.email.errors %}<div class="alert alert-danger">{{ form.email.errors }}</div>{%endif%}
        </div>
        <div class="fieldWrapper form-group  has-feedback">
            <label class="control-label" for="id_password">Password</label>
            <input class="form-control" id="{{ form.password.id_for_label }}" type="password" name="{{ form.password.html_name}}" value="{%if form.password.value %}{{ form.password.value }}{%endif%}">
            {%if form.password.errors %}<div class="alert alert-danger">{{ form.password.errors }}</div>{%endif%}
        </div>
  </div>
  <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<input type="submit" value="Sign in" class="btn btn-primary pull-right"/>
</div>
</form>

モーダルを含むページ

<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog">{% include "assess-beta/login-beta.html" %}</div>

Includeタグを使用して、ページの読み込み時に切り取ったものを読み込み、モーダルを開いたときに使用できるようにします。

Modal.js

$(document).on('submit', '.login-form', function(){
$.ajax({ 
    type: $(this).attr('method'), 
    url: this.action, 
    data: $(this).serialize(),
    context: this,
    success: function(data, status) {
        $('#LoginModal').html(data);
    }
    });
    return false;
});

この場合の.on()の使用は、.live()のように機能します。キーではなく、ボタンではなくドキュメントに送信イベントをバインドします。

4
JUhrig

他の答えが機能するので、 jQuery Form Plugin を使用することを好みます。必要なものなどを完全にサポートします。投稿ビューは、通常どおりDjango部分で処理され、置換されるHTMLを返します。

サーバー側では、Django=コードは他のフォーム送信を処理するのと同じ方法でAJAX postを処理できます。たとえば、

views.py

_def save_note(request, space_name):

    """
    Saves the note content and position within the table.
    """
    place = get_object_or_404(Space, url=space_name)
    note_form = NoteForm(request.POST or None)

    if request.method == "POST" and request.is_ajax():        
        print request.POST
        if note_form.is_valid():
            note_form.save()
            msg="AJAX submission saved"
        else:
            msg="AJAX post invalid"
    else:
        msg = "GET petitions are not allowed for this view."

    return HttpResponse(msg)
_

NoteFormはModelFormであると仮定しましたが、そうする必要があります。したがって、saveメソッドがあります。 save()コマンドを追加することに加えて、_request.is_ajax_をrequest.is_ajax()に変更したことに注意してください。これは、(_request.is_ajax_リクエストに_is_ajax_というメソッドが含まれているかどうかを確認してください。

2
user931920

AJAX POST with Djangoフォーム、公式例を含む)の使用例のほとんど:

https://docs.djangoproject.com/en/1.9/topics/class-based-views/generic-editing/#ajax-example

ModelForm.clean()がエラーを生成しなかった場合は問題ありません(form_valid)。ただし、それらは難しい部分を実行しません。AJAX Javascript/DOMクライアント側への応答を介してModelFormエラーを変換します。

プラグ可能なアプリケーションは、AJAXクライアント側のビューモデルでの応答ルーティングを使用して、クラスベースのビューを自動的に表示しますAJAX post ModelForm検証エラー従来のHTTP POSTで表示されます。

https://Django-jinja-knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processinghttps://Django-jinja-knockout.readthedocs。 org/en/latest/viewmodels.html

Jinja2とDjango Template Engineの両方がサポートされています。

1
Dmitriy Sintsov