jQuery序列化的数据未成功发布到PHP表单处理程序

时间:2018-12-23 03:02:40

标签: javascript php jquery

我正在尝试通过jQuery Ajax将一些数据发布到PHP表单处理程序文件中。它的工作时间较早,但是我本来应该没有收到错误(即它总是发送电子邮件),所以我修改了内容,现在PHP文件不再接收序列化的数据。非常感谢您对此有所关注。我觉得这是一个愚蠢的语法错误,但我没有看到它。

JS(jQuery)

$form.submit(function(e) {
        e.preventDefault();

        var data = $(this).serialize(),
            url = $(this).attr('action');

        console.log(data);

        $(this).addClass('sending');

        $.ajax({
            url: url,
            type: 'GET',
            async: true,
            dataType: 'json',
            data: data,
            success: 
                function(response) {
                    console.log("Success: " + data);

                    if(!response.success) {
                        formError(response);
                    } else {
                        // on success
                        console.log(`✔ Form submission successful!`);
                        console.log(response);

                        // Add success message
                        $form.append(
                            '<div class="success-message"><h3>Your Message Was Sent</h3><p>' 
                            +
                            successMsg
                            + 
                            '</p></div>'
                        ).delay(10)
                        .queue(function(){
                            $(this).find('.success-message').addClass('visible');
                            $(this).dequeue();
                        });                    

                        $form
                            .delay(10)
                            .queue(function() {
                                $(this)
                                    .removeClass('sending')
                                    .addClass('sent')
                                    .dequeue();
                            });

                        $form[0].reset();
                    }
                },
            error: 
                function(xhr, status, error){
                    console.log("Fail: " + data);

                    formError(xhr, status, error);
                }
        });

        function formError(xhr, status, error) {
            //on failure
            console.log('✘ Form submission failed.');
            console.log(xhr);
            console.log(status);
            console.log(error);

            if (!$form.hasClass('error')) {
                $form
                    .addClass('error')
                    .delay(2000)
                    .queue(function() {
                        $(this)
                            .removeClass('error')
                            .removeClass('sending')
                            .dequeue();
                    });
            }
        };
    });

PHP处理程序

<?php 
$errors = '';
$myemail = '#####';//<-----Put Your email address here.

$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
$company = $_POST['company'];
$subject = $_POST['subject'];
$message = $_POST['message'];

$data = array($name, $email, $phone, $company, $subject, $message);

if(
    empty($name) ||
    empty($email) || 
    empty($phone) || 
    empty($company) || 
    empty($message)
) {
    $errors .= "\n You must fill out required fields.";
}

if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", 
$email))
{
    $errors .= "\n Invalid email address.";
}

if( empty($errors) ) {
    $to = $myemail; 
    $email_subject = "Contact Form: $name";
    $email_body =   "<html><body>".
                    "<p>Name: $name<br>".
                    "<p>Company: $company<br>".
                    "Email: $email<br>".
                    "Phone: $phone<br></p>".
                    "<p><b>Subject:</b></p>".
                    "<p>$subject</b></p>".
                    "<p><b>Message:</b></p>".
                    "<p>$message</p>".
                    "</body></html>";

    $headers = "From: $myemail\r\n"; 
    $headers .= "Reply-To: $email\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

    mail($to,$email_subject,$email_body,$headers);

    echo json_encode(array("success" => true, "data" => $data));
} else {
    echo json_encode(array("success" => false,"error" => $errors, "data" => $data));
}
?>

PHP处理程序正在返回数据,以便我可以看到正在发生的事情,然后在控制台上对其进行日志记录。这就是我得到的:

{success: false, error: "↵ You must fill out required fields.↵ Invalid email address.", data: Array(6)}
data: (6) [null, null, null, null, null, null]
error: "↵ You must fill out required fields.↵ Invalid email address."
success: false
__proto__: Object

换句话说,数据实际上没有传递到PHP文件。我假设我有一些愚蠢的语法错误,但我没有看到。救命!

1 个答案:

答案 0 :(得分:1)

您在Ajax中发送GET数据,并尝试在PHP中获得POST

在Ajax函数中将类型更改为POST

$form.submit(function(e) {
        e.preventDefault();

        var data = $(this).serialize(),
            url = $(this).attr('action');

        console.log(data);

        $(this).addClass('sending');

        $.ajax({
            url: url,
            type: 'POST',
            async: true,
            dataType: 'json',
            data: data,
            success: 
                function(response) {
                    console.log("Success: " + data);

                    if(!response.success) {
                        formError(response);
                    } else {
                        // on success
                        console.log(`✔ Form submission successful!`);
                        console.log(response);

                        // Add success message
                        $form.append(
                            '<div class="success-message"><h3>Your Message Was Sent</h3><p>' 
                            +
                            successMsg
                            + 
                            '</p></div>'
                        ).delay(10)
                        .queue(function(){
                            $(this).find('.success-message').addClass('visible');
                            $(this).dequeue();
                        });                    

                        $form
                            .delay(10)
                            .queue(function() {
                                $(this)
                                    .removeClass('sending')
                                    .addClass('sent')
                                    .dequeue();
                            });

                        $form[0].reset();
                    }
                },
            error: 
                function(xhr, status, error){
                    console.log("Fail: " + data);

                    formError(xhr, status, error);
                }
        });

        function formError(xhr, status, error) {
            //on failure
            console.log('✘ Form submission failed.');
            console.log(xhr);
            console.log(status);
            console.log(error);

            if (!$form.hasClass('error')) {
                $form
                    .addClass('error')
                    .delay(2000)
                    .queue(function() {
                        $(this)
                            .removeClass('error')
                            .removeClass('sending')
                            .dequeue();
                    });
            }
        };
    });