PHP Ajax 表单发送

Question

我正在使用 jQuery 序列化函数将表单数据发布到 PHP 脚本。

我的脚本运行正常并且 PHP 正在执行，尽管我没有从我的 PHP 表单中接收到发布的值。

这是我的代码

HTML:

<form id="contact_form" action="process.php" method="POST">
                        <div id="name-group" class="form-group">
                            <label for="name">Name</label>
                            <input type="text" class="form-control" name="name" placeholder="Ringo Starr" form="contact_form">
                        </div>
                        <div id="email-group" class="form-group">
                            <label for="email">Email</label>
                            <input type="text" class="form-control" name="email" placeholder="john@beatles.com" form="contact_form">
                        </div>
                        <div id="email-group" class="form-group">
                            <label for="message">Message</label>
                            <textarea rows="4" class="form-control" id="formMessageArea" name="message" placeholder="Your message here..." form="contact_form"></textarea>
                            <span class="countdown"></span>
                        </div>
                        <div class="result"></div>
                        <button id="submitButton" type="submit" class="btn btn-success">Submit</button>
                    </form>

Ajax 发布:

$.ajax({
        url: $form.attr('action'),
        type: 'POST',
        datatype : 'html',
        data: data,
        success: function(response) {
            if (response.status === "success") {
                $('.result').text("Success!!");
            } else if (response.status === "error") {
                $('.result').text("Error!!");
            }
        }
    });

序列化数据:

name=Jamie+Berke&email=jamie_b25%40hotmail.com&message=testing+123

这是我的 PHP:

<?php
$autoResponse = true; //if set to true auto response email will be sent, if you don't want autoresponse set it to false
$autoResponseSubject = "Demo Contact Form"; 
$autoResponseMessage = "Hi, thank you testing the JQuery Contact Form Demo.";
$autoResponseHeaders = "From: email_from@yourWebsite.com";  

//we need to get our variables first
$email_to =   'jamie_b25@hotmail.com';
$subject  =   'A enquiry for The Retros!';
$name     =   $_POST['name'];
$email    =   $_POST['email'];
$message  =   $_POST['message'];

$body = "From: $name \r\nMessage: \r\n$message";

$headers  = "From: $email\r\n";
$headers .= "CC: test@test.com\r\n";
$headers .= "Reply-To: $email\r\n";


if(mail($email_to, $subject, $body, $headers)){
    if($autoResponse === true){
        mail($email, $autoResponseSubject, $autoResponseMessage, $autoResponseHeaders);
    }
    echo 'success'; 
}else{
    echo 'error';/
}

?>

这是我的 PHP 返回的错误:

Notice: Undefined index: name in C:\Users\Jberke\Documents\Projects\theRetros\src\process.php on line 10

Call Stack: 0.0010 235032 1. {main}() C:\Users\Jberke\Documents\Projects\theRetros\src\process.php:0

Notice: Undefined index: email in C:\Users\Jberke\Documents\Projects\theRetros\src\process.php on line 11

Call Stack: 0.0010 235032 1. {main}() C:\Users\Jberke\Documents\Projects\theRetros\src\process.php:0

Notice: Undefined index: message in C:\Users\Jberke\Documents\Projects\theRetros\src\process.php on line 12

Call Stack: 0.0010 235032 1. {main}() C:\Users\Jberke\Documents\Projects\theRetros\src\process.php:0

如果我在 PHP block 周围添加 if ( isset( $_POST['submit'] ) ) { } ，jQuery-ajax 成功函数不会返回任何内容，我的表单也不会返回任何结果，尽管脚本似乎执行良好。

Answer 1

您的 Jquery ajax 设置选项“数据类型”对于您的任务具有不正确的值，因为您正在发送表单数据。您需要将其删除。

datatype : 'html'

您还需要将序列化的表单数据传递到设置选项“数据”中，或者如果您的可变数据有效，您也可以传递它。

data: $('#contact_form').serialize()
// or
data: data

并且您需要通过返回 false 来防止在没有 ajax 的情况下发送表单。

$form.submit(function() {
    $.ajax({
        url: $form.attr('action'),
        type: 'POST',
        data: $form.serialize(), // or data: data
        success: function(response) {
            ...
        }
    });

    return false;
});