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

Posted 2023-05-08

【中文标题】如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交

【英文标题】：How to confirm a form submission with Bootbox using jQuery AJAX and JSON

【发布时间】：2015-06-24 19:53:10

【问题描述】：

我正在使用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);
                
            );

【参考方案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);
      
    );

【讨论】：

我再次更新了我的问题，我在 `danger: ` 中有代码块，当我按下取消按钮时，对话窗口没有关闭。

【参考方案2】：

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

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

【参考方案3】：

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

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

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

【讨论】：

嘿朋友，我根据你的建议编辑了我的问题，但我仍然遇到问题，现在它显示我的消息 else bootbox.alert("OPERATION FAILED"); 并在该消息下显示确认消息，如果我按 Danger 按钮它不会关闭，我需要按 Success 按钮

【参考方案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);
      
    );