Question

到目前为止，我已成功使用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文件

<form action="" method="post" id="activeform">
    <div id="ajaxwrapper">
    {% csrf_token %}
    {{ form.non_field_errors }}
    {{ form.as_p }}
    <p id="sendwrapper"><input type="submit" value="Start" id="idstartbut" name="_ButtonStart"/></p>
    <p id="sendwrapper"><input type="submit" value="Stop" id="idstopbut" name="_ButtonStop"/></p>
    </div>
</form>

我从未进入 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提交表单没有什么不同。

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

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

现在如何从django返回验证数据？

有两种方法：

1）返回表单的渲染模板，只需用返回的表单替换现有的。在这种情况下，您需要呈现该模板中的所有错误消息。看看这些链接： http://djangosnippets.org/snippets/1094/ How do I display the Django '__all__' form errors in the template?

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

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

2 个答案: