我正在使用 Spring MVC 开发 Web 应用程序。我试图在使用 Bootbox 提交表单之前显示一个确认对话框，但我收到了 500 内部服务器错误。

这是我的表格:

<form id="checkout-form" class="smart-form" novalidate="novalidate">
  ...some fields
  <button type="button" class="btn btn-primary" onclick="insertFunction()">
    Accept
  </button>
</form>

这是我的 insertFunction()

function insertFunction(){

  var name = $('#name').val();
  var lastname = $('#lastname').val();

  var confirmSend;

  var json = {"name": name,"lastname": lastname};

  $.ajax({
    type: "POST",
    url: "register/insertPerson",
    data: JSON.stringify(json),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    cache: false,
    beforeSend: function (xhr){
      bootbox.dialog({
        message: "I am a custom dialog",
        title: "Custom title",
        buttons: {
          success: {
            label: "Success!",
            className: "btn-success",
            callback: function() {
              //I DONT KNOW WHAT TO DO HERE
            }
          },
          danger: {
            label: "Danger!",
            className: "btn-danger",
            callback: function() {
              return false;
            }
          }
        }
      });

      xhr.setRequestHeader("Accept", "application/json");
      xhr.setRequestHeader("Content-Type", "application/json");
    },
    success: function (data){
      if (data.message === true){
        bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS");
      } else {
        bootbox.alert("OPERATION FAILED");
      }
    },
    error: function (xhr, ajaxOptions, thrownError){
      alert(xhr.status);
      alert(xhr.responseText);
      alert(thrownError);
    }
  });
}

我将名字和姓氏值发送到我的 spring Controller ，然后执行插入，如果成功，我的 Controller 方法返回 true，在脚本的成功 block 中，我检查该值，如果为 true，我显示一条消息如果它是假的，我会显示不同的消息。

我的问题是我不知道在这个部分中做什么:

 success: {
  label: "Success!",
    className: "btn-success",
      callback: function() {
        //I DONT KNOW WHAT TO DO HERE
      }
}

*编辑:* 在表单字段中提交值是我的错，现在我没有收到 500 内部服务器错误，现在它显示我在成功 block 中触发的失败对话框

else {
        bootbox.alert("OPERATION FAILED");

然后在这条消息是 sho 之后，在它下面，它显示了我想首先显示的确认对话框。就像以错误的顺序向我显示消息一样。此外，当我按下“危险”按钮时，仅当我按下“成功”时，它才不会关闭对话窗口。

*编辑 2:*

确认窗口正常工作，但是当我按下取消按钮时遇到问题，当我按下取消按钮时窗口没有关闭。

 function preInsert()
{
    bootbox.dialog({
        message: "are you sure",
        title: "are you sure",
        buttons: {
            success: {
                label: "Acept",
                className: "btn-success",
                callback: function () {
                    realInsert();
                }
            },
            danger: {
                label: "Cancel",
                className: "btn-danger",
                callback: function () {
                    return false;
                }
            }
        }
    });
}

function realInsert() {

    var name= $('#name').val();
    var lastName= $('#lastName').val();


    var json = {"name": name,
        "lastName": lastName
    };


    $.ajax(
            {
                type: "POST",
                url: "register/insertForm",
                data: JSON.stringify(json),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                cache: false,
                beforeSend: function (xhr)
                {
                    xhr.setRequestHeader("Accept", "application/json");
                    xhr.setRequestHeader("Content-Type", "application/json");
                },
                success: function (data)
                {



                    if (data === true)
                    {
                        bootbox.alert("Insert Successfully ");
                    }
                    else
                    {
                        bootbox.alert("Problem during the insert");
                    }
                },
                error: function (xhr, ajaxOptions, thrownError)
                {
                    alert(xhr.status);
                    alert(xhr.responseText);
                    alert(thrownError);
                }
            });
}

最佳答案

尝试仅在用户单击成功按钮后才发出ajax请求。单击按钮后将调用回调函数。

function insertFunction() {
  bootbox.dialog({
    message: "I am a custom dialog",
    title: "Custom title",
    buttons: {
      success: {
        label: "Success!",
        className: "btn-success",
        callback: function() {
          success();
        }
      },
      danger: {
        label: "Danger!",
        className: "btn-danger",
        callback: function() {
          return false;
        }
      }
    }
  });

}

function success() {
    var name = $('#name').val();
    var lastname = $('#lastname').val();

    var confirmSend;

    var json = {
      "name": name,
      "lastname": lastname
    };

    $.ajax({
      type: "POST",
      url: "register/insertPerson",
      data: JSON.stringify(json),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      cache: false,
      success: function(data) {
        if (data.message === true) {
          bootbox.alert("OPERATION WAS EXECUTED WITHOUT PROBLEMS");
        } else {
          bootbox.alert("OPERATION FAILED");
        }
      },
      error: function(xhr, ajaxOptions, thrownError) {
        alert(xhr.status);
        alert(xhr.responseText);
        alert(thrownError);
      }
    });

关于javascript - 如何使用 jQuery AJAX 和 JSON 确认通过 Bootbox 提交的表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29708075/