Javascript 如何循环抛出要在网站上显示的数组对象？
我正在使用jQuery/Ajax验证表单。在验证表单时，它会成功地显示错误，但不会显示在网站上。我只能在控制台日志中看到它。我知道这是因为我的js代码。如何在我的网站上显示它 Ajax在响应选项卡中返回数据：Javascript 如何循环抛出要在网站上显示的数组对象？,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在使用jQuery/Ajax验证表单。在验证表单时，它会成功地显示错误，但不会显示在网站上。我只能在控制台日志中看到它。我知道这是因为我的js代码。如何在我的网站上显示它 Ajax在响应选项卡中返回数据： {"error":true, "0":"Your name should be 2-20 characters long", "1":"Your email address required", "2":"Your message subject required", "3":"Your
{"error":true,
"0":"Your name should be 2-20 characters long",
"1":"Your email address required",
"2":"Your message subject required",
"3":"Your message required",
"4":"Invalid captcha"}
$("#contactForm").submit(function(e) {
e.preventDefault();
formData = $(this).serialize();
$.ajax({
url : 'form-validation.php',
type : 'POST',
dataType : 'json',
data : formData,
beforeSend : function () {
$("#form-submit").text('Validation...');
$("#form-submit").prop('disabled', true);
},
success : function ( result ) {
$("#form-submit").text('Send Message');
$("#form-submit").prop('disabled', false);
var len = 0
for ( var x in result) {
alert(len);
$("#formResult").html('<div class="alert alert-danger">'+result[x]+'</div>');
len++;
}
// for ( x in result ) {
// $("#formResult").html('<div class="alert alert-danger">'+result[x]+'</div>');
// if( result['error'] == false ) {
// $("#formResult").html('<div class="alert alert-danger">Your message has been sent. I will contact with you asap.</div>');
// $('#contactForm')[0].reset();
// setTimeout(function () {
// window.location.href = 'http://site/contact.php';
// }, 5000);
// }
// }
}
});
});
<?php
$formName = htmlspecialchars($_POST['form-name']);
$formEmail = htmlspecialchars($_POST['form-email']);
$formSubject = htmlspecialchars($_POST['form-subject']);
$formMessage = htmlspecialchars($_POST['form-message']);
$googleCaptcha = htmlspecialchars($_POST['g-recaptcha-response']);
$secret = 'secret';
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$googleCaptcha);
$responseData = json_decode($verifyResponse);
$data = array();
$data['error'] = false;
if( isset($formName, $formEmail, $formSubject, $formMessage, $googleCaptcha) ) {
if( empty($formName) && empty($formEmail) && empty($formSubject) && empty($formMessage) && empty($googleCaptcha) ) {
$data[] = 'All fields are required';
$data['error'] = true;
} else {
if( empty($formName)) {
$data[] = 'Your name required';
$data['error'] = true;
} elseif( strlen($formName) < 2 || strlen($formName) > 20 ) {
$data[] = 'Your name should be 2-20 characters long';
$data['error'] = true;
} elseif( is_numeric($formName)) {
$data[] = 'Your name must be alphabic characters';
$data['error'] = true;
}
if( empty($formEmail)) {
$data[] = 'Your email address required';
$data['error'] = true;
} elseif( !filter_var($formEmail, FILTER_VALIDATE_EMAIL)) {
$data[] = 'Your email is incorrect';
$data['error'] = true;
}
if( empty($formSubject)) {
$data[] = 'Your message subject required';
$data['error'] = true;
} elseif( strlen($formSubject) < 2 || strlen($formSubject) > 500 ) {
$data[] = 'Your message subject should be 2-500 characters long';
$data['error'] = true;
} elseif( is_numeric($formSubject)) {
$data[] = 'Your message subject must be alphabic characters';
$data['error'] = true;
}
if( empty($formMessage)) {
$data[] = 'Your message required';
$data['error'] = true;
} elseif( strlen($formMessage) < 2 || strlen($formMessage) > 1500 ) {
$data[] = 'Your message should be 2-1500 characters long';
$data['error'] = true;
} elseif( is_numeric($formMessage)) {
$data[] = 'Your message must be alphabic characters';
$data['error'] = true;
}
if( empty($googleCaptcha) ) {
$data[] = 'Invalid captcha';
$data['error'] = true;
} elseif(!$responseData->success) {
$data[] = 'Captcha verfication failed';
$data['error'] = true;
}
}
if( $data['error'] === false) {
$to = "creativeartbd@gmail.com";
$subject = "Contac Form- Creativeartbd.com";
$message = "<b>$formMessage</b>";
$header = "From:creativeartbd.com \r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html\r\n";
$retval = mail ($to,$subject,$message,$header);
if( $retval ) {
$data[] = 'Your message has been sent. I will contact with you asap.';
$data['error'] = false;
} else {
$data[] = "Your message didn't sent";
$data['error'] = true;
}
}
}
echo json_encode( $data );
$("#form-submit").prop('disabled', false);
for ( x in result ) {
$("#formResult").html("<div class='alert alert-danger'>"+result[x]+"</div>");
if( result['error'] == false ) {
$("#formResult").html('<div class="alert alert-danger">Your message has been sent. I will contact with you asap.</div>');
$('#contactForm')[0].reset();
setTimeout(function () {
window.location.href = 'http://www.creativeartbd.com/portfoli/contact.php';
}, 5000);
}
}
$（“#联系人表单”）。提交（功能（e）{
e、 预防默认值（）；
formData=$（this.serialize（）；
$.ajax({
url:“form validation.php”，
键入：“POST”，
数据类型：“json”，
数据：formData，
beforeSend:函数（）{
$（“#表单提交”）.text（'验证…'）；
$（“#表单提交”）.prop（'disabled'，true）；
},
成功：功能（结果）{
$（“#表单提交”）.text（'Send Message'）；
$（“#表单提交”）.prop（'disabled'，false）；
var len=0
对于（结果中的变量x）{
警报（len）；
$（“#formResult”）.html（“”+result[x]+“”）；
len++；
}
//对于结果中的（x）{
//$（“#formResult”）.html（“”+result[x]+“”）；
//如果（结果['error']==false）{
//$（“#formResult”）.html（'您的邮件已发送，我将尽快与您联系'）；
//$（'#contactForm'）[0]。重置（）；
//setTimeout（函数（）{
//window.location.href=http://site/contact.php';
// }, 5000);
// }
// }
}
});
});
$("#contactForm").submit(function(e) {
e.preventDefault();
formData = $(this).serialize();
$.ajax({
url : 'form-validation.php',
type : 'POST',
dataType : 'json',
data : formData,
beforeSend : function () {
$("#form-submit").text('Validation...');
$("#form-submit").prop('disabled', true);
},
success : function ( result ) {
$("#form-submit").text('Send Message');
$("#form-submit").prop('disabled', false);
var len = 0
for ( var x in result) {
alert(len);
$("#formResult").html('<div class="alert alert-danger">'+result[x]+'</div>');
len++;
}
// for ( x in result ) {
// $("#formResult").html('<div class="alert alert-danger">'+result[x]+'</div>');
// if( result['error'] == false ) {
// $("#formResult").html('<div class="alert alert-danger">Your message has been sent. I will contact with you asap.</div>');
// $('#contactForm')[0].reset();
// setTimeout(function () {
// window.location.href = 'http://site/contact.php';
// }, 5000);
// }
// }
}
});
});
<?php
$formName = htmlspecialchars($_POST['form-name']);
$formEmail = htmlspecialchars($_POST['form-email']);
$formSubject = htmlspecialchars($_POST['form-subject']);
$formMessage = htmlspecialchars($_POST['form-message']);
$googleCaptcha = htmlspecialchars($_POST['g-recaptcha-response']);
$secret = 'secret';
$verifyResponse = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$googleCaptcha);
$responseData = json_decode($verifyResponse);
$data = array();
$data['error'] = false;
if( isset($formName, $formEmail, $formSubject, $formMessage, $googleCaptcha) ) {
if( empty($formName) && empty($formEmail) && empty($formSubject) && empty($formMessage) && empty($googleCaptcha) ) {
$data[] = 'All fields are required';
$data['error'] = true;
} else {
if( empty($formName)) {
$data[] = 'Your name required';
$data['error'] = true;
} elseif( strlen($formName) < 2 || strlen($formName) > 20 ) {
$data[] = 'Your name should be 2-20 characters long';
$data['error'] = true;
} elseif( is_numeric($formName)) {
$data[] = 'Your name must be alphabic characters';
$data['error'] = true;
}
if( empty($formEmail)) {
$data[] = 'Your email address required';
$data['error'] = true;
} elseif( !filter_var($formEmail, FILTER_VALIDATE_EMAIL)) {
$data[] = 'Your email is incorrect';
$data['error'] = true;
}
if( empty($formSubject)) {
$data[] = 'Your message subject required';
$data['error'] = true;
} elseif( strlen($formSubject) < 2 || strlen($formSubject) > 500 ) {
$data[] = 'Your message subject should be 2-500 characters long';
$data['error'] = true;
} elseif( is_numeric($formSubject)) {
$data[] = 'Your message subject must be alphabic characters';
$data['error'] = true;
}
if( empty($formMessage)) {
$data[] = 'Your message required';
$data['error'] = true;
} elseif( strlen($formMessage) < 2 || strlen($formMessage) > 1500 ) {
$data[] = 'Your message should be 2-1500 characters long';
$data['error'] = true;
} elseif( is_numeric($formMessage)) {
$data[] = 'Your message must be alphabic characters';
$data['error'] = true;
}
if( empty($googleCaptcha) ) {
$data[] = 'Invalid captcha';
$data['error'] = true;
} elseif(!$responseData->success) {
$data[] = 'Captcha verfication failed';
$data['error'] = true;
}
}
if( $data['error'] === false) {
$to = "creativeartbd@gmail.com";
$subject = "Contac Form- Creativeartbd.com";
$message = "<b>$formMessage</b>";
$header = "From:creativeartbd.com \r\n";
$header .= "MIME-Version: 1.0\r\n";
$header .= "Content-type: text/html\r\n";
$retval = mail ($to,$subject,$message,$header);
if( $retval ) {
$data[] = 'Your message has been sent. I will contact with you asap.';
$data['error'] = false;
} else {
$data[] = "Your message didn't sent";
$data['error'] = true;
}
}
}
echo json_encode( $data );
$("#form-submit").prop('disabled', false);
for ( x in result ) {
$("#formResult").html("<div class='alert alert-danger'>"+result[x]+"</div>");
if( result['error'] == false ) {
$("#formResult").html('<div class="alert alert-danger">Your message has been sent. I will contact with you asap.</div>');
$('#contactForm')[0].reset();
setTimeout(function () {
window.location.href = 'http://www.creativeartbd.com/portfoli/contact.php';
}, 5000);
}
}
将$data
数组更新为这样
$data['messages'][]='Your messages required'
无论您在何处使用此$data[]
。因此，它将提供适当的json格式
您的json格式不正确您应该这样做
{
"messages": [
"Your name should be 2-20 characters long",
"Your email address required",
"Your message subject required",
"Your message required",
"Invalid captcha"
],
"error": true
}
用于打印错误消息
$("#formResult").html("");
for (var x in result.messages) {
$("#formResult").append('<div class="alert alert-danger">' + result.messages[x] + '</div>');
}
$（“#formResult”）.html（“”）；
for（result.messages中的变量x）{
$（“#formResult”）.append（“”+result.messages[x]+“”）；
}
在这个问题上@shabbir，你可以做一件事
在php的$data
数组中添加适当的键
然后在JS代码中捕捉它。根据具体情况，您可以在页面上显示错误。
这里有一个简单的想法
$data['message'] = "First name is required";
$data['error'] = true;
因此，在JS代码中，更新ajax的success
部分，如下所示：
success : function ( result ) {
if(result.error != true)
{
// catch some element of the page to show your error using jquery something like:
$('.error').text(result.message);
}
else
{
// Here your existing code will go...
}
}
你能提到代码中出现错误的地方吗？我已经更新了我的问题。让我试试这个。但是否可以使用我的PHP代码获取消息？好吧，我尝试使用你的代码。现在显示现有的错误消息。例如：如果发生错误，则在我再次提交表单后，错误消息会反复显示。如果我使用$data[]是否可以显示数据=''
？如果我使用html而不是append，会有什么问题吗？但是可以使用我的PHP代码获取消息吗？如果你想将所有错误消息都显示在一起，那么你可以循环PHP数组，然后以ajax响应的形式在数组中发送组合消息。现在，我正在使用你的php代码风格，现在它一个接一个地显示消息。检查我的最新问题。好的@ShibbirAhmed让我给你看。同时，若我的回答对你们有帮助，我可以投票吗？通过这个更新的代码，你们能在表格上看到至少一条错误信息吗？