如何使用 jQuery AJAX 和 JSON 通过 Bootbox 确认表单提交
How to confirm a form submission with Bootbox using jQuery AJAX and JSON
我正在使用 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 控制器,然后执行插入操作,如果成功,我的控制器方法 returns 为真,在脚本的成功块中,我检查值,如果为真,我会显示一条消息,如果为假,我会显示不同的消息。
我的问题是我不知道在这个部分中做什么:
success: {
label: "Success!",
className: "btn-success",
callback: function() {
//I DONT KNOW WHAT TO DO HERE
}
}
*编辑:*
在表单字段中提交值是我的错,现在我没有收到 500 内部服务器错误,现在它显示我在成功块中触发的失败对话框
else {
bootbox.alert("OPERATION FAILED");
然后在这条消息是 sho 之后,在它下面,它显示了我想首先显示的确认对话框。就像以错误的顺序向我显示消息一样。此外,当我点击危险按钮时,它不会关闭对话框 window 只有当我按下成功时。
*编辑 2:*
确认 windows 正在工作,但是当我按下取消按钮时我遇到了问题,当我按下取消按钮时 window 没有关闭。
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);
}
});
}
如果您收到 500 内部服务器错误,则听起来您正在提交表单并访问服务器。服务器端代码可能存在问题,您不会在此处讨论该问题,这会给您带来该错误。
为了让您的确认对话框正常工作,beforeSend
函数在按下 Danger!
按钮时必须 return 为 false。尝试从第二个回调函数 returning false:
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
return false;
}
}
尝试在用户点击成功后才发出ajax请求button.The点击按钮后回调函数将被调用。
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);
}
});
我的回答适用于您的 "EDIT 2" 版本:
如果您从 "Danger!" 按钮的回调中删除 "return false;" 命令,它将正常工作。此外,“接受”按钮将正常工作。
如果您回来阅读此评论,请接受 Pabreetzio 于 4 月 17 日在 21:06 发表的评论,因为他在那里解决了您的问题。
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);
}
});
我正在使用 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 控制器,然后执行插入操作,如果成功,我的控制器方法 returns 为真,在脚本的成功块中,我检查值,如果为真,我会显示一条消息,如果为假,我会显示不同的消息。
我的问题是我不知道在这个部分中做什么:
success: {
label: "Success!",
className: "btn-success",
callback: function() {
//I DONT KNOW WHAT TO DO HERE
}
}
*编辑:* 在表单字段中提交值是我的错,现在我没有收到 500 内部服务器错误,现在它显示我在成功块中触发的失败对话框
else {
bootbox.alert("OPERATION FAILED");
然后在这条消息是 sho 之后,在它下面,它显示了我想首先显示的确认对话框。就像以错误的顺序向我显示消息一样。此外,当我点击危险按钮时,它不会关闭对话框 window 只有当我按下成功时。
*编辑 2:*
确认 windows 正在工作,但是当我按下取消按钮时我遇到了问题,当我按下取消按钮时 window 没有关闭。
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);
}
});
}
如果您收到 500 内部服务器错误,则听起来您正在提交表单并访问服务器。服务器端代码可能存在问题,您不会在此处讨论该问题,这会给您带来该错误。
为了让您的确认对话框正常工作,beforeSend
函数在按下 Danger!
按钮时必须 return 为 false。尝试从第二个回调函数 returning false:
danger: {
label: "Danger!",
className: "btn-danger",
callback: function() {
return false;
}
}
尝试在用户点击成功后才发出ajax请求button.The点击按钮后回调函数将被调用。
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);
}
});
我的回答适用于您的 "EDIT 2" 版本: 如果您从 "Danger!" 按钮的回调中删除 "return false;" 命令,它将正常工作。此外,“接受”按钮将正常工作。
如果您回来阅读此评论,请接受 Pabreetzio 于 4 月 17 日在 21:06 发表的评论,因为他在那里解决了您的问题。
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);
}
});