Jquery 使用Ajax和多重提交进行Django表单验证

到目前为止，我已经成功地使用dajax实现了这个视图，但是我发现它非常混乱，而且正如我所读到的，将视图保存在view.py文件中是一个很好的实践。 我试着用这个指南来实现它：但是没有读到点击了哪个按钮

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

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>

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都是新手。所以，如果要做一些不同的事情，请告诉我如何解决我的问题

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

在一种情况下，浏览器负责处理所有事情并将发送到服务器的查询放在一起，在ajax情况下，所有这些都是由javascript-jQuery在您的情况下完成的

看看这个：

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

有两种方法：

1） 返回表单的呈现模板，并用返回的表单替换现有表单。在这种情况下，您需要呈现该模板中的所有错误消息。 请看以下链接：

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

如果您是jquery和django新手，那么1）更容易做到这一点2）

---

祝你好运

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

在一种情况下，浏览器负责处理所有事情并将发送到服务器的查询放在一起，在ajax情况下，所有这些都是由javascript-jQuery在您的情况下完成的

看看这个：

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

有两种方法：

1） 返回表单的呈现模板，并用返回的表单替换现有表单。在这种情况下，您需要呈现该模板中的所有错误消息。 请看以下链接：

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

如果您是jquery和django新手，那么1）更容易做到这一点2）

---

祝你好运

在安静的搜索之后，我找到了jQuery表单插件，它完全符合我的要求

因此，我的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 

---

在安静的搜索之后，我找到了jQuery表单插件，它完全符合我的要求

因此，我的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 

---

非常感谢。嗯，现在最大的问题是我无法在我的视图中检查哪个按钮被按下了。可能需要在jQuery加载中执行更多操作，但不确定。提交按钮用于提交表单。或者通常向服务器发送某种信息。但是你想把一些额外的信息和这个联系起来吗？在这种情况下，在表单中添加两个额外字段。为此，将init方法添加到表单中，并在该方法中添加2个forms.BoolenFields。一个用于停止，一个用于启动。然后在javascript中，根据单击的按钮，将字段值设置为true，然后发布表单将处理所有问题。谢谢。嗯，现在最大的问题是我无法在我的视图中检查哪个按钮被按下了。可能需要在jQuery加载中执行更多操作，但不确定。提交按钮用于提交表单。或者通常向服务器发送某种信息。但是你想把一些额外的信息和这个联系起来吗？在这种情况下，在表单中添加两个额外字段。为此，将init方法添加到表单中，并在该方法中添加2个forms.BoolenFields。一个用于停止，一个用于启动。然后在javascript中，根据单击的按钮，将字段值设置为true，然后发布表单将处理所有问题。