jquery-steps | 在ajax内容加载上将数据发送到服务器

Question

我在我的项目中使用:http://www.jquery-steps.com/Examples#async.这是一个很好的Jquery插件,用于添加向导.

我的问题是关于动态步骤.下一步的内容应取决于上一步的答案.如何通过AJAX调用向我的后端发送其他数据.我的后端将根据该值为下一步服务.

我搜索了文档和源代码,但找不到答案.

Answer 1

在文档中,它提到了在更改步骤之前触发的事件, https://github.com/rstaib/jquery-steps/wiki/Settings#events

因此,您需要做的是在此事件上添加回调函数,并根据在当前步骤中选择的内容从服务器检索数据.一旦获得数据刷新下一步的内容.

必须小心,因为对服务器的调用是异步的,并且在转换到下一步之前调用onStepChanging事件.为了使它和您的用户都能正常工作(非阻塞),您需要在下一页上显示加载微调器,直到您从服务器的ajax调用获得响应,然后通过填充数据来替换微调器这一步.

Answer 2

当前有两种方法可以实现它。一个用更多的精力，另一个用更少的精力。但是，更少的精力也意味着更少的控制-换句话说，jQuery Steps处理显示和隐藏加载消息以及异步调用本身。无论如何，第一个解决方案（省力）要求您像以前一样在初始化时添加一个默认的异步步骤。

<div id="wizard">
    <h1>Choose</h1>
    <div>
        <select id="choose">
            <option value="0" selected="selected">default</option>
            <option value="1">extraordinary</option>
        </select>
    </div>
    <h1>Result 1</h1>
    <div data-mode="async" data-url="/rest/service/0"></div>
</div>

然后将一小段代码添加到onStepChanging事件中，如提到的melc。此代码应分析上一步的数据，并在必要时删除默认的异步步骤，并在相同位置但使用不同的URL添加一个新的异步步骤。

<script>
    $(function()
    {
        var wizard = $("#wizard").steps({
            onStepChanging: function(event, currentIndex, newIndex)
            {
                if (currentIndex === 0)
                {
                    if ($("#choose > option:selected").val() === "1")
                    {
                        wizard.steps("remove", 1);
                        // In this case you could also use add instead of insert
                        wizard.steps("insert", 1, {
                            title: "Result 2",
                            contentMode: "async",
                            contentUrl: "/rest/service/1"
                        });
                    }
                }
                return true;
            }
        });
    });
</script>

melc已描述了另一种解决方案。