JQuery SmartWizard 양식 제출

Question

그래서 스프링 부트 API 프로젝트는 Jquery SmartWizard입니다. 4의 첫 번째 단계는 간단한 양식을 포함합니다. 테스트를 위해 하나의 필드 (ID : 이름)를 사용하고 있습니다.

마법사의 Next 버튼을 클릭하면 jquery 메서드가 실행되어 데이터베이스에 게시 된 세부 정보 양식을 작성한 다음 마법사의 Next Step (2)로 이동합니다.

$(document).ready(function() { 
$('#wizard').smartWizard({ 
    onLeaveStep: function() { 
       ajaxPost(); 
    } 
}); 

$('.buttonNext').addClass('btn btn-success'); 
$('.buttonPrevious').addClass('btn btn-primary'); 
$('.buttonFinish').addClass('btn btn-default'); 

function ajaxPost(){ 

    var formData = { 
     name : $("#first-name").val() 
     //lastname : $("#lastname").val() 
    }; 

    // DO POST 
    $.ajax({ 
     type : "POST", 
     contentType : "application/json", 
     url : "http://localhost:8080/api/uc/create", 
     data : JSON.stringify(formData), 
     dataType : 'json', 
     success : function(result) { 
      console.log(result) 
     }, 
     error : function(e) { 
      alert("Error!"); 
      console.log("ERROR: ", e) 
     } 
    }); 

    //$('#wizard').smartWizard('goForward'); 

    // Reset FormData after Posting 
    //resetData(); 

} 

function resetData(){ 
    $("#first-name").val(""); 
    //$("#lastname").val(""); 
} 
}); 

ajaxPost()이 작동하지만 마법사가 다음 단계로 넘어 가지 않습니다. 이 줄을 주석 처리하지 않으면 //$('#wizard').smartWizard('goForward'); ajaxPost() 함수는 데이터베이스에있는 많은 데이터를 복제합니다.

다음 버튼을 클릭하여 양식을 제출 한 후 ajax 기능을 통해 마법사를 2 단계로 이동 시키려면 어떻게해야합니까?

Answer 1

아약스 게시물은 비동기식이므로 자바 스크립트는 응답을 기다려야합니다.

대부분의 경우 아약스 요청이 성공한 경우에만 위자드를 계속 사용하고 싶을 것입니다.

그래서 성공 핸들러에 'goForward를'이동 : 당신이 쓴

... 
success : function(result) { 
     $('#wizard').smartWizard('goForward'); 
    }, 
... 

많은 항목이 데이터베이스에 추가됩니다. 당신이 필요로하는, 그래서

1. 이 서버가 제대로 작동, 그래서 그 전화했을 때 볼이 중단 점을 추가하고 얼마나 많은 항목 호출 당이
2. 클라이언트가 서버를 여러 번 호출을 생성하지 않습니다이 두 가지 이유가있을 수 프론트 엔드 디버그