如何在步骤1中单击“下一步”时获取JQuery-Steps来调用ajax服务

我正在使用jquery步骤，虽然我需要在单击第一个’next’时通过ajax调用ac #service，这是否可以在显示步骤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

如果我没错，那么在onStepChanging方法中放置ajax调用应该可行。

请注意，您有3个可用参数，其中一个 – event – 应该是单击的按钮。 如果需要，可以使用它来更好地定义url var。 同样使用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 });