Джанго формы и Аякс - PullRequest
Новая
       18

Джанго формы и Аякс

2 голосов
/ 24 февраля 2012

Я пытаюсь создать страницу с двумя функциональными частями:

  • форма, которую пользователь заполняет и отправляет много раз
  • диаграмма, которая обновляется каждый раз, когда пользователь отправляет форму

Я использую django формы и jQuery , и я не могу понять, как дизайн сочетается друг с другом.
После отправки формы должно произойти одно из двух: либо диаграмма (и только диаграмма) обновляется, либо, если есть ошибка проверки формы, раздел формы должен обновляться с соответствующими сообщениями об ошибках. Так что на самом деле один Ajax-вызов должен обновить любую часть.
Я бы хотел, чтобы обновлялась только соответствующая div (форма или диаграмма) вместо всей страницы, которая включает в себя другую div, логотип и другую статическую графику.

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

Каким будет правильный шаблон для представления django для этого поведения?
Каким будет правильный шаблон javascript \ jQuery для этого поведения?
Если этот подход не верен, какой будет альтернативный подход?

Ответы [ 3 ]

1 голос
/ 24 февраля 2012

Почему бы не вернуть JSON с ошибками проверки, если форма содержит недопустимые данные?Django имеет поля Form.errors , которые содержат ошибки проверки для каждого поля.Эти поля могут быть легко преобразованы в JSON и использованы для пометки ваших входных данных недействительными:

Ваше мнение: 

def submit_form_view(request):

    if request.method == 'POST': # If the form has been submitted...
        form = ChartForm(request.POST) 
        if form.is_valid():    # All validation rules pass
            # Return JSON response if form was OK
            response_data = {'form_saved':True, 'data':'somedata'}    
            return HttpResponse(json.dumps(response_data), mimetype="application/json")
        else:                     # Invalid data:
            # Send what were errors
            response_data = {'form_saved': False, 'errors': form.errors}
            return HttpResponse(json.dumps(response_data), mimetype="application/json")

    else:
        form = ChartForm() # An unbound form

    return render_to_response('contact.html', {
        'form': form,
    })

Код JavaScript: 

$.ajax({
  url: '{% url someapp.submit_form_view %}',
  success: function(data) {
      if( data.form_saved ){

            $('#form input').removeClass('error'); // Form submit ok -> remove error class of all fields

            var chart_data = data.chart_data;
            // Update the chart here   

      }else{
            var form_errors = data.form_errors;

            // Display form validation errors
            for(var fieldname in form_errors) {

                var errors = form_errors[fieldname];       // Array of error strings for fieldname

                $('#form input[name="'+fieldname+']').addClass('error')

            }
      }      
  }
});
1 голос
/ 24 февраля 2012

Вам нужен JavaScript. Например, с помощью jQuery: 

$('form').submit(function() {
    $.post($(this).attr('action'), $(this).serialize(), function(data, textStatus, jqXHR){
        if (typeof data == 'object') {
            // json was returned, update the chart with the json
        } else {
            // the form had error, the form's html was returned
            $('form').html(data);
        }
    })
})

У вас может быть такой вид Python: 

from django.utils import simplejson
from django import shortcuts

def chart_form(request):
    template_full = 'chart_full.html' # extends base.html etc ..
    template_form = 'chart_form.html' # just the form, included by chart_full.html

    if request.method == 'POST':
        form = formClass(request.POST) 
        if form.is_valid():
            // do your chart_data
            chart_data = ....
            return http.HttpResponse(simplejson.dumps(chart_data), mimetype='application/json')
    else:
        form = formClass()

    if request.is_ajax():
        template_name = template_form
    else:
        template_name = template_full

    return shortcuts.render(template_name, {'form': form}, request)

Примечание: это не сработает, если ваша форма содержит поля файла. В этом случае положитесь на этот плагин: http://jquery.malsup.com/form/ (функция ajaxSubmit)

0 голосов
/ 29 ноября 2013

Есть хорошая статья об этом. Это действительно описывает дизайн форм AJAX с Django. Там есть все основные вещи, которые могут вам понадобиться через некоторое время. Как и обработка ошибок AJAX, использование плагина базовых форм jQuery и обработка событий. Также акцент делается на подключении именно бэкэнда Django и внешнего интерфейса jQuery.form. Вот. http://garmoncheg.blogspot.com/2013/11/ajax-form-in-django-with-jqueryform.html

...