javascript - 如何在网站中做向导？

Question

在网站中，我想实现一个 wizard .它应该看起来像一系列表单。

我的要求是:

• 用户应该能够使用后退和前进浏览器按钮，而不会被提示重新提交表单(来回时)。
• 如果用户在先前填写的页面上后退或前进，则应自动完成这些字段
• 如果用户在没有填写前面的步骤的情况下试图访问一个页面，他应该被相应地重定向(最后需要的页面)。
• 用户应该能够在离开和返回后恢复表单完成。
• 在我的模型中，每一页都需要填写前一页。每个页面都有自己的验证。
• 网址应该很漂亮。
• 该向导应该在没有 javascript 的情况下工作(但不是强制性的)。

您将如何实现？ (一系列 http post 表单，http get 表单，是否通过 javascript 提交？)

---

思想:

我计划将所有信息存储在 session 中，并在向导结束时将信息保存在数据库中并删除当前 session 信息。这样我就可以自动完成字段，并知道用户在完成向导时的位置。

我的主要担忧:

• 如果我使用 http posts 表单实现，浏览器会提示重新提交每个表单(我不知道如何控制它)
• 如果我用 http GET 表单实现它，url 会充满信息，而且可能会很长。而且这不是 GET 请求的方式。
• 如果我通过 javascript 通过 http post 提交每个表单，将不会有提示，但我的向导将无法使用 javascript(也许解决方案是覆盖默认表单行为以使其在有和没有 javascript 的情况下工作)<

Answer 1

我不推荐使用session进行任意数据存储!如果您最终使用 session 进行登录身份验证，这往往会很快变得困惑，并且还会扰乱安全模型。将您的身份验证与设置数据分开，并专门为设置创建一个表，或使用 javascript localStorage!

在您的情况下，您所描述的内容对我来说很像一个长表单，它具有显示/隐藏多个表单部分的功能，并增加了持久存储的怪癖!

换句话说，不是 form1 > form2 > form3 > form4 > done

form_section_1 > 验证，保存数据，然后显示 form_section_2 并隐藏 form_section_1 > 验证，保存数据，然后显示 form_section_3，隐藏 form_section_2 > etc > 真正的表单提交一次

对于没有 javascript 的用户，只需在提交任何部分时在所有部分验证他们在 php 中的信息。如果您真的想让它存储，即使是在边缘情况下，您也可以将由他们的 session_id 标识的信息存储到设置表中。

在这种情况下，为了简单起见，我会使用 localStorage 来存储每次验证的所有数据，并使用 javascript 来防止意外离开主窗体。如果你真的必须通过支持 ie7 ( http://caniuse.com/#search=localStorage ) 来使你的生活复杂化，那么检测 localStorage 并且在它不存在的情况下，将数据传递给一个 php 脚本，然后将它放入一个数据容器对象中并转换它所有到一个 json 包中，保存在 session 中的单个变量中，或者更好的是，保存在数据库的设置表中。