djangoforms和ajax
我正在尝试创建一个包含两个function部分的页面：
- 用户填写和提交多次的表单
- 每次用户提交表单时更新的图表
我正在使用django表单和jQuery ，我无法弄清楚设计是如何组合在一起的。
在提交表单时，应该发生以下两种情况之一：图表（并且只有图表）更新，或者如果存在表单validation错误，表单部分应该使用相应的错误消息进行更新。 所以实际上一个Ajax调用应该更新任一部分。
我只想更新相关的div （表单或图表）而不是包含其他div ，徽标和其他静态图形的整个页面。
其中一个挑战是，如果表单sumbission运行良好，我想返回一个更新图表的JSON对象，因为我正在使用第三方图表包，但是如果提交文件错误，则返回的内容应该是HTML回复更新的表格。
对于这种行为，django视图的正确模式是什么？
这个行为的正确javascript \ jQuery模式是什么？
如果这种方法不正确，那么另一种方法是什么呢？
你需要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/ （function ajaxSubmit）
当表单包含无效数据时，为什么不返回带有validation错误的JSON？ Django有一个Form.errors字段，其中包含每个字段的validation错误。 这些字段可以很容易地转换为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') } } } });
这篇文章有一篇很好的文章。 它真的用Django描述了AJAX表单的设计。 那里有一些基本的东西，你可能需要一段时间。 与AJAXerror handling一样，jQuery基本表单插件使用和事件处理。 重点在于连接Django后端和jQuery.form前端。 这里是。 http://garmoncheg.blogspot.com/2013/11/ajax-form-in-django-with-jqueryform.html