Javascript 单击按钮保存django表单

我目前正在努力学习django。我决定创建一个小应用程序。目前我正在制作一个表单，在一个页面上创建VoteType和投票候选人。我创建了一个页面，您可以在其中添加任意数量的候选字段，但当我单击按钮时，什么都没有发生，即使我没有单击按钮，也会保存一些数据。我在电视上看这本《django指南》。这家伙在做一个简单的表格。他将method=POST和action=''添加到。。。在他使用的视图中（request.POST或None）。我试着做类似的事情，但由于我的表格有点复杂，我真的很困惑

这是我的views.py代码：

def create(request):
    voteTypeForm = VoteTypeForm(request.POST or None)
    voteForm = VoteForm(request.POST or None)
    instance = voteTypeForm.save(commit=False)
    instance.pub_date = timezone.now()
    instance.save()
    instance2 = voteForm.save(commit=False)
    instance2.save()
    #print instance.pub_date
    context = RequestContext(request,{
            'voteTypeForm': voteTypeForm,
            'voteForm': voteForm,
    })
    return render(request, 'Vote/create.html', context)

这是我的create.html django模板：

{% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'Vote/style.css' %}" />
<fieldset id="fieldset">
    <form method = 'POST' action = ''>{%csrf_token %}
        <p>{{ voteTypeForm }}</p>
    </form>
        <div id="placeholder">

        </div>
        <p>
            <button type="button" name="Submit" onclick="Add();">+</button>
        </p>
    <input type = 'submit' value="create"/>
</fieldset>
<script type='text/javascript'>
{#    document.write(code);#}
    var _counter = 0;
    var template = document.createTextNode('')
    function appendStringAsNodes(element, html) {
        var frag = document.createDocumentFragment(),
            tmp = document.createElement('body'), child;
        tmp.innerHTML = html;
        // Append elements in a loop to a DocumentFragment, so that the browser does
        // not re-render the document for each node
        while (child = tmp.firstChild) {
            frag.appendChild(child);
        }
        element.appendChild(frag); // Now, append all elements at once
        frag = tmp = null;
    }
    function Add() {
        var code = '<div id="template">' +
                '<p>' +
                    '<fieldset id="fieldsets">' +
                        '<legend id="legends">Candidate No ['+ String(_counter+1) +']</legend>' +
                       ' <form method = "POST" action = "">'+
                              '<input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token }}" />' +
                            '<p><label for="id_name">Name:</label> <input id="id_name" maxlength="50" name="name" type="text" /></p>'+
                            '<p><label for="id_image">Image:</label> <input id="id_image" name="image" type="file" /></p>'+
                        '</form>' +
                   ' </fieldset>' +
                '</p>' +
            '</div>';
        _counter++;
        appendStringAsNodes(document.getElementById("placeholder"),code);
        document.getElementById("someInput").value = _counter;
    }
</script>

{%load staticfiles%}
{%csrf_令牌%}
{{voteTypeForm}}


+

{#document.write（code）；#}
var_计数器=0；
var template=document.createTextNode（“”）
函数appendStringAsNodes（元素，html）{
var frag=document.createDocumentFragment（），
tmp=document.createElement（'body'），子级；
tmp.innerHTML=html；
//将循环中的元素附加到DocumentFragment，以便浏览器执行此操作
//不为每个节点重新呈现文档
while（child=tmp.firstChild）{
附肢儿童（child）；
}
element.appendChild（frag）；//现在，一次追加所有元素
frag=tmp=null；
}
函数Add（）{
变量代码=“”+
“”+
'' +
'候选编号['+字符串（_计数器+1）+']'+
' '+
'' +
“名称：
”+
“图像：
”+
'' +
' ' +
“
”+
'';
_计数器++；
appendStringAsNodes（document.getElementById（“占位符”），代码）；
document.getElementById（“someInput”）.value=\u计数器；
}

---

如何修复此代码，使我的程序仅在按下“创建”按钮时保存实例？

您仍然需要检查操作是否为POST，表单是否有效，并且在成功提交后必须重定向

def create(request):
    voteTypeForm = VoteTypeForm(request.POST or None)
    voteForm = VoteForm(request.POST or None)
    if request.method == 'POST':
        # check validity separately to avoid short-cutting
        vote_type_valid = voteTypeForm.is_valid()
        vote_form_valid = voteForm.is_valid()
        if vote_type_valid and vote_form_valid:
            instance = voteTypeForm.save(commit=False)
            instance.pub_date = timezone.now()
            instance.save()
            instance2 = voteForm.save(commit=False)
            instance2.save()
            return redirect('<view-you-redirect-to-on-success'>
    context = RequestContext(request,{
            'voteTypeForm': voteTypeForm,
            'voteForm': voteForm,
    })
    return render(request, 'Vote/create.html', context)

def创建（请求）：
voteTypeForm=voteTypeForm（request.POST或None）
voteForm=voteForm（request.POST或None）
如果request.method==“POST”：
#单独检查有效性，避免抄近路
投票类型有效=voteTypeForm.is有效（）
vote\u form\u valid=voteForm.is\u valid（）
如果投票类型有效且投票形式有效：
instance=voteTypeForm.save（commit=False）
instance.pub_date=timezone.now（）
save（）实例
instance2=voteForm.save（commit=False）
instance2.save（）
return redirect（“最简单的方法是在按下submit按钮时发出ajax请求。
考虑到您有一个表单“voteForm”，请尝试使用django的内置模板加载此表单：

{{voteForm.as_p}}


这将创建您已经完成的表单。

现在，当您按下提交按钮时，使用表单数据发出ajax请求。


ajax请求将把您的数据带到表单中，并返回一个响应，您可以使用该响应进一步进行处理。
ajax请求的一个快速示例是：

    function youfunctionname()
        $.ajax({
                   type: "POST",
                   url: url,
                   data: $("#yourformname").serialize(), // serializes the form's elements.
                   success: function(data)
                   {
                       alert(data);
                   }
                 });
  }

“最简单的方法是在你按下提交按钮时发出ajax请求”：呃，事实上，没有。为什么不？@Brunodesshuilliers因为1.这不是“最简单的方法”-添加ajax提交只意味着更多的代码-2.它不能解决OP的问题，OP调用
form.save（）
和
instance.save（））
无论使用什么方法，而不是在
请求上分支。方法
仅在帖子中执行保存部分（参见Daniel Roseman的回答）。我尝试了此操作，但它没有重定向到另一个视图。这就是我所做的。但“创建”按钮似乎没有任何作用。您的占位符div和“提交”按钮不在模板中的
元素中，它们应该在该元素中。对此进行了更改，但现在它重新检测以再次创建视图，而不是转到“已创建”视图。而且它似乎不存在保存输入的数据。现在我再来看看你的代码，我看到你在JS中做了一些非常奇怪的事情。使用表单集，因为显示表单的多个实例正是它们的用途。