[英]jQuery post function for form validation only allows alert() to show returned data
好的,所以我已經嘗試了很多東西。
$.post("include/ajax.php", { type: "workbookNumber", wbn: $("input[name='wbn']").val() }, function(data) {
error.push("<li>"+data+"</li>");
alert(data);
});
error.push是已創建的錯誤數組,它工作正常,但根本不會添加到數組中。 好像那行代碼不存在。 在逗號變量數據中有一些實例,其中有一個額外的逗號,顯示它存在,但即便如此, <li></li>
仍應顯示。
jQuery.ajax({
type: "POST",
url: "include/ajax.php",
dataType:"html",
data: { type: "workbookNumber", wbn: $("input[name='wbn']").val() },
success:function(response) {
alert(response);
},
error:function (xhr, ajaxOptions, thrownError) {
alert("damn. -_-");
alert(xhr.status);
alert(thrownError);
}
});
我想不出任何合理的解釋,我認為PHP沒有足夠的時間來顯示結果,因為它正在搜索超過20000個代碼的數據庫,但結果仍然通過警報返回,只是不通過可以在屏幕上顯示的實際文本中的錯誤數組。
錯誤數組工作正常,只是這個功能不起作用。 以下是DOES正常工作的其他一些示例:
if($("input[name='fname']").val() == "") {
error.push("<li>The first name field is blank</li>");
}
if($("input[name='lname']").val() == "") {
error.push("<li>The last name field is blank</li>");
}
if($("select[name='usertype']").val() == 0) {
if($("input[name='vcode']").val() == "") {
error.push("<li>The voucher code field is blank</li>");
} else {
$.post("include/ajax.php", { type: "findVoucher", vcode: $("input[name='vcode']").val() }, function(data) {
if(data == "none") {
error.push("<li>The voucher code does not exist</li>");
}
});
}
}
這是整個代碼:
$(document).ready(function() {
$("#sit_date").datepicker();
$("select[name='usertype']").change(function() {
if($(this).val()=="0") {
$(".indv").slideUp(500);
$(".comp").slideDown(500);
} else {
$(".indv").slideDown(500);
$(".comp").slideUp(500);
}
});
$("input[name='marka'],input[name='markb']").bind("keypress paste keyup blur focus", function() {
var marka = $("input[name='marka']").val();
var markb = $("input[name='markb']").val();
var perc = (marka/markb)*100;
if(perc>0 && perc<=100) {
$("#per").html(Math.round(perc));
} else {
$("#per").html("");
}
});
$("input[name='vcode']").bind("keypress keyup paste blur focus", function() {
$.post("include/ajax.php", { type: "checkVoucher", vcode: $(this).val() }, function(data) {
$("input[name='group']").val(data);
});
$.post("include/ajax.php", { type: "checkType", vcode: $(this).val() }, function(data) {
$("input[name='certificates']").val(data);
});
});
$("input[name='wbn']").bind("keypress keyup paste blur focus", function() {
$.post("include/ajax.php", { type: "getAssessment", wbn: $(this).val() }, function(data) {
if(data!="") {
$("select[name='assessment']").html(data);
}
});
});
/*
//turn into function
$(document).keyup(function(event){
if(event.keyCode == 13){
alert("works");
$("input[name='manual_add']").click();
}
});
*/
var error = [];
$("input[name='manual_add']").click(function() {
if($("input[name='fname']").val() == "") {
error.push("<li>The first name field is blank</li>");
}
if($("input[name='lname']").val() == "") {
error.push("<li>The last name field is blank</li>");
}
if($("select[name='usertype']").val() == 0) {
if($("input[name='vcode']").val() == "") {
error.push("<li>The voucher code field is blank</li>");
} else {
$.post("include/ajax.php", { type: "findVoucher", vcode: $("input[name='vcode']").val() }, function(data) {
if(data == "none") {
error.push("<li>The voucher code does not exist</li>");
}
});
}
}
if($("input[name='wbn']").val() == "") {
error.push("<li>The workbook number field is blank</li>");
} else {
$.post("include/ajax.php", { type: "workbookNumber", wbn: $("input[name='wbn']").val() }, function(data) {
error.push("<li>"+data+"</li>");
//this is the only thing that works correctly:
alert(data);
});
}
if(($("input[name='questions']").val() == "") && ($("input[name='marka']").val() != $("input[name='markb']").val())) {
error.push("<li>The questions wrong field is blank</li>");
}
var list = "";
$.each(error, function(i,val) {
list += val;
});
if(error.length>0) {
$(".error").slideUp(500);
$(".jquery-error ul").html("").append(list);
$(".jquery-error").slideDown(500);
} else {
$("form").submit();
}
});
});
var error
在click()
函數中聲明,因此無法在該函數外部訪問。 全局聲明它,你的代碼應該工作。 (在jsfiddle上使用全局error
變量為我工作正常。)
其余的錯誤處理代碼工作正常,因為它與error
變量( click()
函數)在同一范圍內定義。 但是對ajax請求的回調不是在函數的上下文中執行,而是在window
上下文中執行。 這絕對是一個范圍問題。
當然,您必須等待服務器的響應才能返回更新錯誤通知。 編寫一個迭代error
數組並顯示相應通知的函數,然后從AJAX調用的error
函數中調用該函數。
請嘗試以下方法:
var error = [];
jQuery.ajax({
type: "POST",
url: "include/ajax.php",
dataType:"html",
data: { type: "workbookNumber", wbn: $("input[name='wbn']").val() },
success:function(response) {
alert(response);
},
error:function (xhr, ajaxOptions, thrownError) {
error.push("<li>"+thrownError+"</li>");
showErrors();
}
});
function showErrors () {
var list = "";
$.each(error, function(i,val) {
list += val;
});
if(error.length>0) {
$(".error").slideUp(500);
$(".jquery-error ul").html("").append(list);
$(".jquery-error").slideDown(500);
} else {
$("form").submit();
}
}
你需要等到ajax函數完成,例如:
} else { //use a variable for ajax
var XHR = $.post("include/ajax.php", { type: "workbookNumber", wbn: $("input[name='wbn']").val() }, function(data) {
error.push("<li>"+data+"</li>");
});
}
XHR.always(function() { //make sure ajax is completed and array updated first
var list = "";
$.each(error, function(i,val) {
list += val;
});
if(error.length>0) {
$(".error").slideUp(500);
$(".jquery-error ul").html("").append(list);
$(".jquery-error").slideDown(500);
} else {
$("form").submit();
}
});
您確定沒有使用本地變量隱藏全局變量錯誤嗎? 嘗試使用
console.log(data);
console.log(error);
在您的匿名函數中,您將看到問題所在。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.