Джанго формы и Ajax

Question

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

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

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

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

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

Answer 1

Нужен 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); 
     } 
    }) 
}) 

Вы можете иметь такой вид питона:

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/ (function ajaxSubmit)

Answer 2

Почему бы не вернуть 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') 

      } 
     }  
    } 
}); 

Answer 3

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