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

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

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

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

解决方法

目前有两种方法可以实现它.一个用更多,另一个用更少的努力.但是更少的努力意味着更少的控制 – 换句话说,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描述.