Как разместить форму Django с AJAX & JQuery

Я проверил множество учебных пособий для форм AJAX django, но каждый из них предлагает вам один из способов сделать это, ни один из них не прост, и я немного растерялся, так как никогда не работал с 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, и обновить объект заметки?

64 голоса | спросил Oscar Carballal 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2011 18:39:38 +0400 2011, 18:39:38

6 ответов


0

Поскольку вы используете 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>
ответил Sevenearths 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2011 19:36:58 +0400 2011, 19:36:58
0

Вы можете получить доступ к данным запроса POST, используя имя переменной, в вашем случае:

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

Объект request.POST является неизменным. Вы должны присвоить значение переменной, а затем манипулировать им.

Я бы посоветовал вам использовать этот плагин JQuery , чтобы вы могли писать обычные формы HTML, а затем получить их "модернизировать" до AJAX. Наличие $ .post везде в вашем коде довольно утомительно.

Кроме того, используйте представление «Сеть» в Firebug (для Firefox) или Инструменты разработчика для Google Chrome, чтобы вы могли просматривать то, что отправляется вашими вызовами AJAX.

ответил Gerardo Curiel 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2011 20:14:59 +0400 2011, 20:14:59
0

Нужно обратить внимание на то, когда вы возвращаете форму в виде 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

Форма 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 (), ключ, связывающий событие отправки не с кнопкой, а с документом.

ответил JUhrig 28 J0000006Europe/Moscow 2014, 07:35:59
0

Поскольку другие ответы работают, я предпочитаю использовать плагин формы jQuery . Он полностью поддерживает то, что вы хотите и многое другое. Представление поста обрабатывается как обычно в части Django, просто возвращая заменяемый HTML.

ответил Armando Pérez Marqués 8 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 08 Sep 2011 09:08:06 +0400 2011, 09:08:06
0

На стороне сервера ваш код django может обрабатывать пост AJAX так же, как он обрабатывает другие представления формы. Например,

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() я изменил request.is_ajax в request.is_ajax(), что вам нужно (если вы используете request.is_ajax ваш код просто проверит, есть ли в запросе метод с именем is_ajax, что, очевидно, и делает ).

ответил user931920 7 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 07 Sep 2011 20:25:37 +0400 2011, 20:25:37
0

Большинство примеров использования AJAX POST с формами Django, включая официальный пример:

https: //docs .djangoproject.com /ы /1,9 /темы /на основе класса-мнение /родовое редактирование /# Ajax-пример

хорошо, когда ModelForm.clean() не выдало никаких ошибок (form_valid). Однако они не выполняют сложную часть: переводят ошибки ModelForm через AJAX-ответ клиентской стороне Javascript /DOM.

Мое подключаемое приложение использует маршрутизацию ответов AJAX с клиентскими моделями представления для автоматического отображения представления AJAX на основе классов. ModelForm ошибки проверки, аналогичные как они будут отображаться в традиционном HTTP POST:

https: //django-jinja- knockout.readthedocs.org/en/latest/forms.html#ajax-forms-processing https://django-jinja-knockout.readthedocs.org/en/latest /viewmodels.html

Поддерживаются Jinja2 и Django Template Engine.

ответил Dmitriy Sintsov 18 MaramFri, 18 Mar 2016 11:17:03 +03002016-03-18T11:17:03+03:0011 2016, 11:17:03

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132