Question

我正在网上实施调查问卷，我希望每个问题块都有自己的“页面”，这样用户就不必滚动了。但是，页面加载有两个问题：a）它们需要时间（并且有明显的闪烁/刷新）和b）这样的方法会迫使我进行数据表插入加上多次更新（或者将它存储在我的会话中）。

我如何使用JQuery让用户在客户端通过调查问卷页面，随时回答问题？然后，当最后提交所有答案时，我将能够处理数据存储。

还有一件事......如果用户需要一段时间，有没有办法确保会话没有超时？

Answer 1

就个人而言，在这种情况下，我可能会采用简单方式。在隐藏div中的初始页面加载中预先加载所有内容。然后使用jQuery显示/隐藏每个问卷“页面”：

div#pageTwo {
     display: none;
}

<div>
    <div id="pageOne">
        <p>Do you like the color blue?<p>
        <p>What about green?</p>
        <a href="#" onClick="gotoPageTwo();">Next Page</a>
    </div>
    <div id="pageTwo">
        <p>...</p>
    </div>
</div>

其中gotoPageTwo是一个利用jQuery在div之间进行转换的函数。这可以像$("div#pageOne").hide()和$("div#pageTwo").show()一样简单，或者您可以为稍微增强的用户体验添加一些漂亮的平滑动画过渡（只是不要过分，因为太多的动画很快就会分散注意力。）< / p>

然后，您还可以使用jQuery以某个间隔（短于会话超时时间）将AJAX调用回服务器，以发出简单请求。后台的简单请求将确保用户会话保持活跃状态。

Answer 2

我不只是试图兜售我的jQuery插件或任何东西，但我确实有一个不错的jQuery向导实现可以帮助你很多：http://github.com/dominicbarnes/jWizard / http://plugins.jquery.com/project/jwizard

Answer 3

这在JavaScript / jQuery中非常简单。加载整个问卷HTML并隐藏除要显示的所有块之外的所有块有什么问题？这就像$(element).hide();和$(element).show();一样简单。

如果整个调查问卷的HTML太大，您可以尝试将每个块分成自己的 HTTP请求，并让JavaScript通过Ajax每5秒钟（或左右）加载一次。通过这种方式，用户可以立即启动调查问卷，而不是等待整个事情加载，这也可以是保持会话活跃的一种方式。

Answer 4

快速谷歌搜索产生了这一点 - http://plugins.jquery.com/project/formwizard。

至于你的第二个问题，你可以实现一个'keep-alive'页面，你可以定期发送AJAX请求到setInterval。

如何使用JQuery实现“向导”样式页面？

4 个答案: