django表单向导ajax下一步

我正在使用django表单向导创建一个9步建议表单。一切都很好，直到我想使用ajax加载下一步。我很难在jquery中配置ajax调用，因为django表单的表单标记中没有包含操作url。为什么会这样？对我来说，一个双赢的局面是为下一步提供一个加载屏幕，如果在该步骤中有上载文件过程，则显示上载文件的加载百分比。谢谢

我正在使用这个代码，它对我有效。如你所见，我没有在表单中添加任何操作。我在提交表单时使用jquery'on'函数，因为所有表单都在div#creation中重新加载和更改。那么ajax url必须是显示表单的url

在我的例子中，当我单击某个按钮时，表单的第一步也是通过带有get的ajax呈现的。这就是为什么div一开始没有任何形式。（我正在使用bootstrap的modals）

代码por creation_form.html：

<form id="creation-form" action="#" method="post">
    {% csrf_token %}
    <table>
        {{ wizard.management_form }}
        {{ wizard.form }}
    </table>

    {% if wizard.steps.prev %}
        <button name="wizard_goto_step" class="btn btn-primary" aria-  hidden="true"    type="submit" value="{{ wizard.steps.first}}">First</button>
        <button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}">Previous</button>
    {% endif %}
    <input id="create-submit" class="btn btn-primary" type="submit" value="submit" />
</form>

希望这是对您答案的正确回答

我目前很难进入第一步/上一步，如果你能理解，请告诉我怎么做

这就是你要找的吗？

这是我做的-

为每个步骤创建单独的模型表单。这有助于简化服务器端验证

对每个步骤进行ajax调用，以在服务器端验证表单，并在成功时呈现下一个表单并隐藏上一个表单

提交最后一个表单时，异步发布用于持久化和处理的数据，并在最后一步下方异步呈现响应

还为每个步骤维护了一个进度条

---

这就是我使用django表单创建异步表单向导的方式。不整洁但有效！：）

FormData（）类从何而来？顺便说一下，要完成上一步/第一步，您只需创建一个

，希望它能有所帮助。非常感谢。我在某个地方读到了HTML5。这个代码对你有用吗？我还可以让按钮工作，不是吗？

template_name = 'creation_form.html'

<form id="creation-form" action="#" method="post">
    {% csrf_token %}
    <table>
        {{ wizard.management_form }}
        {{ wizard.form }}
    </table>

    {% if wizard.steps.prev %}
        <button name="wizard_goto_step" class="btn btn-primary" aria-  hidden="true"    type="submit" value="{{ wizard.steps.first}}">First</button>
        <button name="wizard_goto_step" class="btn btn-primary" aria-hidden="true" type="submit" value="{{ wizard.steps.prev}}">Previous</button>
    {% endif %}
    <input id="create-submit" class="btn btn-primary" type="submit" value="submit" />
</form>

$('#creation').on('submit', '#creation-form' , function(e){
    e.preventDefault();
    var fd = new FormData($('#creation-form').get(0));
    $.ajax({
      url: '/create/',
      data: fd,
      type: "POST",
      success: function(data){
            $('#creation').html(data);
          },
      processData: false,
      contentType: false
    });
});