如何使用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内部服务器错误，而是显示我在成功块中触发的失败对话框。

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

- StackQuestion

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

- Patrick Graham

---

我又更新了我的问题，我在 danger: { 中的代码块存在问题，当我点击取消按钮时，对话框窗口不会关闭。 - StackQuestion

Answer 2

针对您“EDIT 2”版本的问题，我的回答是：如果您从“Danger!”按钮的回调中删除“return false;”命令，则它将正常工作。同时，接受按钮也将正常工作。

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

- Igorovics

Answer 3

如果你遇到了500内部服务器错误，那么很可能是因为你正在提交表单并向服务器发送请求。这个错误可能是由于服务端代码出现问题导致的，但是你没有在这里讨论这个问题。

要使你的确认对话框起作用，必须在按下“危险！”按钮时，beforeSend函数返回false。尝试从第二个回调函数中返回false。

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

- Patrick Graham

---

嗨，朋友，我按照你的建议编辑了我的问题，但仍然遇到问题。现在它会显示我的消息 else { bootbox.alert("OPERATION FAILED");，并在该消息下方显示确认消息。如果我按下"危险"按钮，它不会关闭，我需要按下"成功"按钮。 - StackQuestion

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

- Bhavana Kaparthy