如何使用AJAX和jQuery发布Django表单

一尘不染

如何使用AJAX和jQuery发布Django表单

django

我已经检查了很多有关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",
    });
}

当前代码从模板获取数据并将其打印在终端中。我不知道该如何处理这些数据。我见过有人通过jqueryforms管理数据以将数据发送到Django。

如何访问AJAX发送的数据并更新便笺对象？

阅读 310

2020-03-27

共1个答案

一尘不染

由于你使用的是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>

编辑

正如评论中指出的那样，有时上述方法无效。因此，请尝试以下操作：

<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>

2020-03-27