如何获得JQuery-在步骤1中单击“next”时调用ajax服务的步骤

Question

我正在使用jquery，虽然我需要在单击第一个'next‘时通过ajax调用c#服务，但在显示步骤2之前是否可以调用并返回？尽管在加载步骤2之后ajax事件会返回，但下面的代码仍然有效。

非常感谢，任何帮助都很感激。

Jquery步骤

http://www.jquery-steps.com/Examples#basic

我注意到了这些方法？也许这就是我需要的

onStepChanging: function (event, currentIndex, newIndex)
onFinishing: function (event, currentIndex)
onFinished: function (event, currentIndex) 

我的ajax事件

    $(function () {
        $('a[href="#next"]').click(function () {
            var url = "...";

            $.ajax({
                url: url,
                success: function (response) {
                    // Form fields on second step
                    $("#EmailAddress").val(response.Email);
                    $("#FirstName").val(response.Firstname);
                    $("#LastName").val(response.Lastname);
                },
                error: function () {
                    alert("something went wrong");
                }
            });
        });

    });

Answer 1

如果我没有错，那么将ajax调用放在onStepChanging方法中就可以了。

注意，您有3个可用参数，其中一个参数-- event --应该是单击按钮。如果需要的话，可以使用它来更好地定义url变量。此外，使用currentIndex，您可以检测是否处于第一步。

form.steps({
    onStepChanging: function (event, currentIndex, newIndex)
    {

       if (currentIndex == 0) { //I suppose 0 is the first step
           var url = "..."; 

           $.ajax({
               url: url,
               success: function (response) {
                   // Form fields on second step
                   $("#EmailAddress").val(response.Email);
                   $("#FirstName").val(response.Firstname);
                   $("#LastName").val(response.Lastname);
                   return true;
               },
               error: function () {
                   alert("something went wrong");
                   return false; //this will prevent to go to next step
               }
           });
       }
    },
});

Answer 2

var is_async_step = false;
$("#wizard").steps({
        onStepChanging: function (event, currentIndex, newIndex) {
            //USED TO SEND USER TO NEXT STEP IS ASYNC REQUEST IS PRESENT - FOR AJAX CALL 
            if (is_async_step) {
                is_async_step = false;
                //ALLOW NEXT STEP
                return true;
            }

            if (currentIndex == 2) {                
                $.ajax({
                    type: 'POST',
                    url: "Reservation.aspx/SomeFunction",
                    data: serializeData({  }),
                    contentType: "application/json",
                    dataType: 'json',
                    success: function (data) {
                        move = data.d;

                        //Add below 2 lines for every Index(Steps).                            
                        is_async_step = true;
                        //This will move to next step.
                        $(form).steps("next");
                    },
                    error: ajaxLoadError
                });
            }
             //Return false to avoid to move to next step
             return false;
        },
        saveState: true
    });