如何使用jQuery AJAX和JSON确认使用Bootbox提交表单 [英] How to confirm a form submission with Bootbox using jQuery AJAX and JSON

问题描述

我正在使用 Spring MVC 在Web应用程序中工作。我在使用 Bootbox 提交表单之前尝试显示确认对话框，但我收到500内部服务器错误。

I'm working in a web application using Spring MVC. I'm trying to show a confirmation dialog before submitting a form using Bootbox, but I'm getting a 500 internal server error.

这是我的表格：

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

这是我的insertFunction（）

This is my 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);
    }
  });
}

我将名称和姓氏值发送给我的弹簧控制器，我做了一个插入，如果成功，我的控制器方法返回true，在我的脚本的成功块中，我检查值是否为真我显示一条消息，如果它是假我显示不同的消息。

I send the name and last name value to my spring controller and I do a insert and if it was successfully my controller method returns true, and in the success block of my script I check the value if is true I show a message and if it's false i show a different message.

我的问题是我不知道该部分内该做什么：

My problem is that i don't know what to do inside this section:

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

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

* * It was my fault submiting a value in the form fields, now I'm not getting a 500 internal server error, now it show me my FAILED dialog that i fire in the success block

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

然后在这条消息之后，在它下面，它显示我想要的确认diaglog显示第一。就像是以错误的顺序向我显示消息。此外，当我点击危险按钮时，只有当我按下成功时才会关闭对话窗口。

and then after this message is sho, down under it, it shows the confirmation diaglog that i want to show firts. Is like is showing me the messages in the wrong order. Also when i hit the Danger button it don't close the dialog window only if i press Success.

*编辑2：*

确认窗口正常工作，但是当我按下取消按钮时出现问题，当我按下取消按钮时，窗口不会关闭。

The confirmation windows is working, but I'm having problems when i press the cancel button, when i press the cancel button the window don't close.

 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请求用户单击成功按钮后。单击按钮后将调用回调函数。

Try making the ajax request only after the user clicks the success button.The callback function will be called after the button is clicked.

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

这篇关于如何使用jQuery AJAX和JSON确认使用Bootbox提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！