使用Ajax和多次提交的Django表单validation

到目前为止，我已经成功地使用dajax实现了这个视图，但是我发现它非常混乱，因为我到目前为止一直在阅读，所以最好在view.py文件中查看你的视图。 我尝试使用本指南实现它： http ： //www.micahcarrick.com/ajax-form-submission-django.html但无法读取单击的按钮。

在提交（无重定向）后仍然会显示相同的视图，因为页面还包含我连接的乐器的绘图和其他状态。

models.py

class ActiveMeas(models.Model): channels = models.CharField(max_length=100) technology = models.ForeignKey(TechnologyModel) samples = models.IntegerField() delay = models.IntegerField() table = models.IntegerField() stir = models.IntegerField() 

forms.py

 class ActiveForm(ModelForm): class Meta: model=ActiveMeas 

html文件

 
 
 {% csrf_token %} {{ form.non_field_errors }} {{ form.as_p }} 
 
 
  

而视图文件我从来没有进入buttonstart或buttonstop 。 另一个问题是如何将数据返回到javascript并从那里更新？

views.py

 def active(request): if request.POST: form = ActiveForm(request.POST) if '_ButtonStart' in request.POST: print "START" if form.is_valid(): response_data = {'data':request.POST} return HttpResponse(simplejson.dumps(response_data)) else: print "NOT VALID" response_data = {'data':request.POST} return HttpResponse(simplejson.dumps(response_data)) elif '_ButtonStop' in request.POST: print "STOP" else: form = ActiveForm() return render(request, 'active.html', {'index': "active",'form':form}) 

JavaScript的

 function ActiveInit(){ $(document).ready(function () { $(function() { var form = $("#activeform"); form.submit(function(e) { $("#ajaxwrapper").load( form.attr('action') + ' #ajaxwrapper', form.serializeArray(), ); e.preventDefault(); }); }); } 

我对django，ajax和jQuery都很新。 如果要做的事情有所不同，请告诉我，以及如何解决我的问题。

Answer 1

用ajax或没有提交表单没有什么不同。

在一个案例中，浏览器会处理所有事情，并将发送到服务器的查询放在一起，在ajax的情况下，所有这些都是通过javascript – jQuery完成的。

看看这个： http ： //api.jquery.com/jQuery.post/

现在如何从django返回validation数据？

有两种方法：

1）返回表单的渲染模板，只需用返回的表单替换现有的模板。 在这种情况下，您需要呈现该模板中的所有错误消息。 看看这些链接： http ： //djangosnippets.org/snippets/1094/ 如何在模板中显示Django’__ all__’表单错误？

2）在第二种情况下，您可以手动将django端的所有表单错误列表放在一起。 将它们转换为json，然后编写与网站上的元素匹配错误的脚本，然后显示它们。

如果你是jquery和django的新手那么1）更容易做到2）

祝好运

Answer 2

在安静了一些搜索之后，我找到了jQuery表单插件http://www.malsup.com/jquery/form/ ，它确实非常符合我想要的。

所以我的javascript现在只需：

 $(document).ready(function(){ $('#aform').ajaxForm(function(data){ if(data){ //Do something with the returned data } }); }); 

它们都发送表单并将值提交给我的视图。

我的视图函数然后将错误转储到jQuery，然后显示，如果有的话

 if request.POST: form = ActiveForm(request.POST) if form.is_valid(): errors="" if '_ButtonStart' in request.POST: print "START" elif '_ButtonStop' in request.POST: print "STOP" else: print "NOT VALID stop" errors=form.errors return HttpResponse(simplejson.dumps(errors)) else: form = ActiveForm() return render(request, 'active.html', {'index': "active",'form':form}) 

在javascript中，错误可以通过以下方式读取：

 var errors = $.parseJSON(data); console.log(errors.samples); //Samples is an inputbox in my form