javascript - 获得 4 的 readyState 和 200 的状态加上 "OK"的 statusText 并且成功函数仍然没有被调用

Question

我试图让我的邮件表单正常工作，但我一直在调用 ajax 成功函数时遇到问题。我已经阅读了许多与我正在谈论的内容接近的文章和问题，但尚未找到答案，所以请不要将我回复到另一篇文章或说这是一个重复的问题。我获得了 4 的 readyState 和 200 的状态加上“OK”的状态文本，并且成功函数仍然没有被调用。我不知道是什么阻止了它被调用。电子邮件信息完美无缺地发送到我的电子邮件，但再次未调用成功功能。任何帮助都将是惊人的，我们将不胜感激。

这是我的 EMAIL.php 文件:

<?php 
    error_reporting(E_ALL|E_STRICT);
    ini_set('display_errors', 1);
    # Is the OS Windows or Mac or Linux 
    if (strtoupper(substr(PHP_OS,0,3)=='WIN')) { 
      $eol="\r\n"; 
    } elseif (strtoupper(substr(PHP_OS,0,3)=='MAC')) { 
      $eol="\r"; 
    } else { 
      $eol="\n"; 
    } 

    //CHECK IF MAIL HAS BEEN SENT AND IF EMAIL FIELD IS FILLED.
    if(isset($_POST['email'])) {

        $email_to = 'me@example.com';
        $email_subject = 'Website Change Request';

        if(!isset($_POST['name']) ||
            !isset($_POST['email']) ||
            !isset($_POST['message'])) {
            died('We are sorry, but there appears to be a problem with the form you submitted.');       
        }

         // Get the form fields and remove whitespace.
        $em_name = $_POST["name"];
        $em_email = $_POST["email"];
        $em_message = $_POST["message"];
        $em_phone = $_POST['phone'];
        $em_website = $_POST['website'];
        $em_hear = $_POST['hear'];
        $em_startdate = $_POST['startdate'];
        $em_budget = $_POST['budget'];

        $error_message = "";
        $string_exp = "/^[A-Za-z .'-]+$/";
        $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

        if(!preg_match($email_exp,$em_email)) {
            $error_message .= 'The Email Address you entered does not appear to be valid.<br />';
        }

        if(!preg_match($string_exp,$em_name)) {
            $error_message .= 'The First Name you entered does not appear to be valid.<br />';
        }

        if(strlen($em_message) < 2) {
            $error_message .= 'The Comments you entered do not appear to be valid.<br />';
        }

        if(strlen($error_message) > 0) {
            echo $error_message;
        }

        $mime_boundary = md5(time()); 

        $email_headers = "From: " . $em_email . $eol;
        $email_headers .= "Reply-To: " . $em_email . $eol;
        $email_headers .= "X-Mailer: PHP v".phpversion().$eol; 
        $email_message .= "Content-Type: text/html; charset=iso-8859-1".$eol; 
        $email_message .= "Content-Transfer-Encoding: 8bit".$eol.$eol; 

        // Build the email content.
        $email_message =  "Name: " . $em_name . $eol;
        $email_message .= "Message: " . $em_message . $eol;
        $email_message .= "Budget: " . $em_budget . $eol;
        $email_message .= "Start Date: " . $em_startdate . $eol;
        $email_message .= "How did you hear about us?: " . $em_hear . $eol;
        $email_message .= "Email: " . $em_email . $eol;
        $email_message .= "Phone: " . $em_phone . $eol;
        $email_message .= "Website: " . $em_website . $eol;

        mail($email_to, $email_subject, $email_message, $email_headers); 
        echo "MAIL INFO: "+mail($email_to, $email_subject, $email_message, $email_headers);
        echo "message was succesfull!";
    }
    else{
        echo "not working form";
    }
?>

Javascript:

          emailValidation: function(e){
            e.preventDefault();
            $('body, html').animate({scrollTop:0},"slow");
            var valid = '';
            var name = $("#f_name").val();
            var email = $("#f_email").val();
            var message = $("#f_message").val();
            var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

            if(name === '' || name.length <= 2){
                valid += '<p class="error">Name must be longer than 2 char.</p>';
            }
            if(message === '' || message.length <= 5){
                valid += '<p class="error">Message must be longer than 5 char.</p>';
            }
            if (!(email).match(emailReg)){
                valid += '<p class="error">Invalid Email</p>';
            }
            if (valid !== ''){
                $('#form-messages').html(''+valid+'').fadeIn();
            }
            else {
                // var formData = $("#contact").serialize();//Value for sanitized form values to be paased to email.php. Value returns an array
                 portfolio.submitEmail();
            }
        },
        submitEmail: function(){
            var formData = $("#contact").serializeArray();
            console.log('Form DATA: '+formData);//Value for sanitized form values to be paased to email.php. Value returns an array
            //$('#form-messages').html("Proccessing...").fadeIn('slow');
            $.ajax({
                type: 'POST',
                url: 'mailer.php',
                data: formData,
                dataType: 'json',
                success: function(response){
                    $("#contact").fadeOut('slow').remove();
                    $('#form-messages').removeClass();
                    $('#form-messages').empty().addClass('success');
                    $('#form-messages').html('<p class="success">Message has been sent succesfully! Thank you '+ $('#f_name').val() +', a response will be returned in less than one business day.</p>');
                    console.log('success');
                    console.log(response);
                },
                complete: function(response){
                    $("#contact").fadeOut('slow').remove();
                    $('#form-messages').removeClass();
                    $('#form-messages').empty().addClass('success');
                    $('#form-messages').html('<p class="success">Message has been sent succesfully! Thank you '+ $('#f_name').val() +', a response will be returned in less than one business day.</p>');
                    console.log('complete');
                    console.log(response);
                },
                error: function(error){
                    console.log('error');
                    console.log(error);

                },
            });
        },

Answer 1

问题似乎出在您的 jQuery.ajax 设置对象中。您正在指定 'json' 的 dataType，但是您的 EMAIL.php 不输出 JSON，它输出纯文本的外观.由于 jQuery 无法将响应解析为 JSON，因此它将调用 error 回调，而不是 success 回调。

要更正此问题，请改为指定 dataType: "text"，或者完全删除该属性。

示例:

$.ajax({
    type: 'POST',
    url: 'mailer.php',
    data: formData,
    dataType: 'text',
    success: function(response){
        $("#contact").fadeOut('slow').remove();
        $('#form-messages').removeClass();
        $('#form-messages').empty().addClass('success');
        $('#form-messages').html('<p class="success">Message has been sent succesfully! Thank you '+ $('#f_name').val() +', a response will be returned in less than one business day.</p>');
        console.log('success');
        console.log(response);
    },
    complete: function(response){
        $("#contact").fadeOut('slow').remove();
        $('#form-messages').removeClass();
        $('#form-messages').empty().addClass('success');
        $('#form-messages').html('<p class="success">Message has been sent succesfully! Thank you '+ $('#f_name').val() +', a response will be returned in less than one business day.</p>');
        console.log('complete');
        console.log(response);
    },
    error: function(error){
        console.log('error');
        console.log(error);

    },
});

此外，为了避免 PHP 严格警告，请更改此行:

$email_message .= "Content-Type: text/html; charset=iso-8859-1".$eol;

对此:

$email_message = "Content-Type: text/html; charset=iso-8859-1".$eol;

您在追加之前从未声明过此变量，这将导致严格警告。