1. ホーム
  2. javascript

AJAX と jQuery を使って django のフォームを POST する方法

2023-10-26 23:49:24

質問

私はdjangoのAJAXフォームのためのチュートリアルを大量にチェックしましたが、それらの各々はそれを行うための1つの方法を伝え、それらのどれも単純ではなく、私はAJAXで働いたことがないので、私は少し混乱しています。

私は "note" というモデルを持っていて、そのためのモデルフォームがあり、テンプレート内部では note 要素が (jQuery Sortables から) stop() シグナルを送信するたびに 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",
    });
}

現在のコードは、テンプレートからデータを取得し、ターミナルに表示します。このデータをどのように操作すればいいのかわかりません。jqueryformsを通してデータを管理し、djangoにデータを送っている人を見たことがあります。

どのように私はAJAXによって送信されたデータにアクセスし、ノートオブジェクトを更新することができますか?

どのように解決するのですか?

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>