[英]JQuery confirmation dialog after AJAX request
我需要在服務器端驗證具有給定注冊號的人是否已經在數據庫中。 如果此人已經注冊,那么我會正常進行程序流程。 但是,如果該號碼尚未注冊,那么我想顯示一個確認對話框,詢問運營商是否想要注冊一個輸入號碼的新人,如果運營商回答是,那么該人員將在在提交的表格上通知的數字。
我試過了
服務器端(PHP):
if (!$exists_person) {
$resp['success'] = false;
$resp['msg'] = 'Do you want to register a new person?';
echo json_encode($resp);
}
客戶端:
function submit(){
var data = $('#myForm').serialize();
$.ajax({
type: 'POST'
,dataType: 'json'
,url: 'myPHP.php'
,async: 'true'
,data: data
,error: function(response){
alert('response');
}
});
return false;
}
我甚至看不到警報,這就是我想要將確認對話框放在服務器端寫的消息。 其他問題,如何重新提交附加操作員答案的整個表單,以便服務器可以檢查答案是否為是注冊這個新人?
編輯
我能夠通過這種方式解決問題:
服務器端(PHP):
$person = find($_POST['regNo']);
if ($_POST['register_new'] === 'false' && !$person) {
$resp['exists'] = false;
$resp['msg'] = 'Do you want to register a new person?';
die(json_encode($resp)); //send response to AJAX request on the client side
} else if ($_POST['register_new'] === 'true' && !$person) {
//register new person
$person = find($_POST['regNo']);
}
if($person){
//proceed normal program flow
}
客戶端:
function submit(e) {
e.preventDefault();
var data = $('#myForm').serialize();
var ajax1 = $.ajax({
type: 'POST'
, dataType: 'json'
, async: 'true'
, url: 'myPHP.php'
, data: data
, success: function (response) {
if (!response.exists && confirm(response.msg)) {
document.getElementById('register_new').value = 'true'; //hidden input
dados = $('#myForm').serialize(); //reserialize with new data
var ajax2 = $.ajax({
type: 'POST'
, dataType: 'json'
, async: 'true'
, url: 'myPHP.php'
, data: data
, success: function () {
document.getElementById('register_new').value = 'false';
$('#myForm').unbind('submit').submit();
}
});
} else if (response.success) {
alert(response.msg);
$('#myForm').unbind('submit').submit();
}
}
});
}
您的PHP似乎沒有任何問題。
問題是(1)您正在錯誤回調中進行警報,並且您的請求沒有失敗,因此您看不到警報。 (2)您正在警告字符串'response'
而不是變量response
。
值得注意的是,您應該使用.done()
和.fail()
promise方法( http://api.jquery.com/jquery.ajax/#jqXHR )。
這是固定的JS:
function submit() {
var data = $('#myForm').serialize();
// Same as before, with the error callback removed
var myAjaxRequest = $.ajax({
type: 'POST',
dataType: 'json',
url: 'myPHP.php',
async: 'true',
data: data
});
// The request was successful (200)
myAjaxRequest.done(function(data, textStatus, jqXHR) {
// The data variable will contain your JSON from the server
console.log(data);
// Use a confirmation dialog to ask the user your question
// sent from the server
if (confirm(data.msg)) {
// Perform another AJAX request
}
});
// The request failed (40X)
myAjaxRequest.fail(function(jqXHR, textStatus, errorThrown) {
console.log(errorThrown);
});
return false;
}
此外,您在PHP中設置'status'並在JS中檢查(我推測)。 您要做的是從服務器設置HTTP狀態代碼,如下所示:
if (!$exists_person)
{
$resp['msg'] = 'Do you want to register a new person?';
// 400 - Bad Request
http_response_code(400);
echo json_enconde($resp);
}
然后,jQuery將根據您回復的狀態代碼確定請求是否失敗。 200
是成功的請求, 400
號碼失敗。
查看此頁面以獲取完整列表: https : //httpstatuses.com/
好的,這是一個兩部分的問題; 我會盡力回答這兩個部分:
第1部分 :如何檢測成功是否為假並觸發確認彈出窗口?
在jQuery.ajax中,基於響應代碼觸發錯誤處理程序。 這可能不是你想要的。 您可以使用成功處理程序並測試值res.success
以查看它是true還是false。 這將是:
function submit(e) {
e.preventDefault();
var data = $('#myForm').serialize();
$.ajax({
type: 'POST',
dataType: 'json',
url: 'myPHP.php',
async: 'true',
data: data
}).done(function(res) {
if (!res.success) {
alert(res.msg);
}
});
}
第2部分 :如何通過確認重新提交?
使用我們之前的代碼,我們將進行一些更改,允許submit()
傳遞一個參數registerNew
。 如果registerNew
為true,我們將它作為參數傳遞給PHP中的ajax處理程序,因此它知道我們想要注冊一個新人。 Javascript看起來像這樣:
function submit(e, registerNew) {
if (e) e.preventDefault();
var data = $('#myForm').serialize();
var ajax_options = {
type: 'POST',
dataType: 'json',
url: 'myPHP.php',
async: 'true',
data: data
};
ajax_options.data.register_new = !!registerNew;
$.ajax(ajax_options).done(function(res) {
if (!res.success && confirm(res.msg)) {
submit(null, true);
}
});
}
正如您在此處看到的,我們在ajax選項中的數據中傳遞了一個新的register_new
參數。 現在我們需要在PHP端檢測到這一點,這很容易看起來像這樣(這在你的php ajax處理程序中):
if ($_POST["register_new"]) {
// new user registration code goes here
} else {
// your existing ajax handler code
}
在提交功能中添加確認
function submit(){
var data = $('#myForm').serialize();
if (confirm('Are you ready?')) {
$.ajax({
type: 'POST'
,dataType: 'json'
,url: 'myPHP.php'
,async: 'true'
,data: data
,error: function(response){
alert('response');
}
});
}
return false;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.