JQuery SmartWizard表单提交

所以我有一个使用Jquery SmartWizard的Spring Boot API项目。 4的第一步包含一个简单的表单。为了测试的目的，我正在使用一个字段（ID：first-name）。JQuery SmartWizard表单提交

单击向导的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。

来源

2017-04-22 Marcellinus

ajax post是异步的，所以javascript需要等待响应。

只有在ajax请求成功的情况下，最有可能你想继续使用wizzard。

所以移动“goForward”到成功处理程序：

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

你写，许多条目添加到数据库中。这可能有两方面的原因：

服务器不能正常工作，所以添加断点那里看看它的调用时，有多少项每次调用创建
客户端调用服务器很多次，所以你需要调试前端

来源

2017-04-23 09:04:24

是的，我试过了，出于某种原因，它在数据库中多次插入记录，就像我在上面的代码中注释过的一样... – Marcellinus

1.问题不在服务器上。我使用其他RestClient工具运行它，并且它完美地工作。 2.是的，显然这就是发生了什么事情，问题是我该如何解决这个问题，以及/或者调用函数以进入'ajaxPost（）'之后的下一个选项卡的适当方式是什么。 – Marcellinus

JQuery SmartWizard表单提交

回答

相关问题