1

所以我有一个使用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。

4

1 回答 1

0

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

很可能您希望继续使用向导，只有在 ajax 请求成功的情况下。

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

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

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

  1. 服务器无法正常工作，因此在此处添加断点以查看其调用时间以及每次调用创建了多少条目
  2. 客户端多次调用服务端，需要调试前端
于 2017-04-23T09:04:24.633 回答