我正在尝试创建一个包含两个功能部分的页面：
我正在使用 django forms 和 jQuery，但我无法弄清楚设计如何组合在一起。
提交表单后，应发生以下两件事之一，图表（并且仅图表）更新，或者，如果存在表单验证错误，则表单部分应使用适当的错误消息进行更新。所以实际上一个 Ajax 调用应该更新任一部分。
我只想更新相关的div（表格或图表），而不是整个页面，其中包括其他div、徽标和其他静态图形。
其中一个挑战是，如果表单提交顺利，我想返回一个更新图表的 JSON 对象，因为我使用的是第 3 方图表包，但是如果提交失败，返回的内容应该是带有更新表单的 HTML 响应。
对于这种行为，django 视图的正确模式是什么？
对于这种行为，正确的 javascript\jQuery 模式是什么？
如果这种方法不正确，还有什么替代方法？
【问题讨论】：
标签： jquery ajax django django-forms
你需要 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)
【讨论】：
当表单包含无效数据时，为什么不返回带有验证错误的 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')
}
}
}
});
【讨论】：
有一篇关于这个的好文章。它真正描述了用 Django 设计 AJAX 表单。那里有所有基本的东西，你可能需要一段时间。像 AJAX 错误处理、jQuery 基本表单插件使用和事件处理。重点还在于准确连接 Django 后端和 jQuery.form 前端。这里是。 http://garmoncheg.blogspot.com/2013/11/ajax-form-in-django-with-jqueryform.html
【讨论】：