如何使用 AJAX & 发布 django 表单jQuery [英] How to POST a django form with AJAX & jQuery

问题描述

我查阅了大量有关 django AJAX 表单的教程，但每一个都告诉您一种方法，它们都不简单，而且我有点困惑，因为我从未使用过 AJAX.

I've checked out tons of tutorials for django AJAX forms, but each one of them tells you one way of doing it, none of them is simple and I'm a bit confused since I've never worked with AJAX.

我有一个名为note"的模型，它有一个模型表单，在模板中我需要每次 note 元素发送 stop() 信号(来自 jQuery Sortables)django 更新对象.

I have a model called "note", a modelform for it, and inside the template I need that everytime a note element sends the stop() signal (from jQuery Sortables) django updates the object.

我当前的代码:

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.

The current code gets the data from the template and prints it in the terminal. I don't know how I can manipulate this data. I've seen some people manages the data through jqueryforms to send the data to django.

如何访问AJAX发送的数据并更新note对象?

How can I access the data sent by AJAX and update the note object?

推荐答案

既然你在使用 jQuery，为什么不使用以下内容:

Since you are using jQuery why not use the following:

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

编辑

正如评论中指出的那样，有时上面的方法是行不通的.因此，请尝试以下操作:

As pointed out in the comments sometimes the above won't work. So try the following:

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

这篇关于如何使用 AJAX & 发布 django 表单jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！