javascript - 如何循环遍历数组对象以在网站上显示？

Question

我正在使用 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 message required",
"4":"Invalid captcha"}

我正在使用以下 JS 代码:

$("#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代码:

<?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);
                }
            }

Answer 1

更新您的 $data 数组以使其像这样

$data['messages'][] = '需要您的消息';

你在任何地方都使用这个$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>');
}