Question

所以我有一个使用Jquery SmartWizard的Spring Boot API项目。第一步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

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

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

所以移动＆＃39; goForward＆＃39;进入成功处理程序：

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

您写道，许多条目都添加到数据库中。这可能有两个原因：

服务器无法正常工作，因此在那里添加断点以查看其被调用的时间以及每次调用创建的条目数
客户端多次调用服务器，因此您需要调试前端

JQuery SmartWizard表单提交

1 个答案: