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

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

这是我的表格：

 
 ...some fields  Accept   

这是我的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"); 

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

*编辑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

我的回答是你的“编辑2”版本：如果你删除“返回错误;” 从你的“危险！”命令 按钮的回调，它将正常工作。 “接受”按钮也可正常工作。

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

Answer 3

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

为了让你的确认对话工作， beforeSend函数必须在Danger!时返回false Danger! 按下按钮。 尝试从第二个回调函数返回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); } });