如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交

Question

我正在使用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 控制器并执行插入操作，如果成功，我的控制器方法返回 true，然后在脚本的成功块中检查值是否为 true 我显示一条消息如果它是假的，我会显示不同的信息。

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

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

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

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

然后在显示此消息后，在它下方，它会显示我想要显示的确认对话框。就像以错误的顺序向我显示消息。此外，当我点击“危险”按钮时，只有当我按下“成功”时它才会关闭对话框窗口。

*编辑 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);
                }
            });
}

Answer 1

尝试在用户点击成功按钮后才发出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);
      }
    });

Answer 2

我的答案是针对您的“EDIT 2”版本： 如果去掉“return false;”从你的“危险！”命令按钮的回调，它将正常工作。接受按钮也将正常工作。

如果您再次阅读此评论，请接受 Pabreetzio 于 4 月 17 日 21:06 发表的评论，因为他在那里解决了您的问题。

Answer 3

如果您收到 500 内部服务器错误，那么听起来您正在提交表单并访问服务器。服务器端代码可能存在问题，您在此处不讨论会导致该错误。

为了让您的确认对话能够正常工作，beforeSend 函数必须在按下 Danger! 按钮时返回 false。尝试从第二个回调函数返回 false：

danger: {
  label: "Danger!",
  className: "btn-danger",
  callback: function() {
    return false;
  }
}

Answer 4

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);
      }
    });