jQuery Ajax 请求未到达 PHP 脚本

Question

我正在尝试创建一个具有 javascript 验证的邮件表单。表单值应使用 ajax 发送到 php 脚本，该脚本将数据通过电子邮件发送到电子邮件地址。

但是，php 代码、成功或错误 jquery 回调都不会被调用，chrome 的 javascript 控制台中也没有任何日志。

这是我的简化 html 页面：

<form id="mail-form">
    <div class="input-row">
    <div class="label"><label for="name">Your name: *</label></div>
    <div class="input"><input type="text" name="name" id="name" maxlength="50"/></div>
        <input id="submit-button" type="submit" value="send"/>
</form>

我的javascript：

$(document).ready(function () {
    var form = $("#mail-form");

    form.submit(function (e) {
        e.preventDefault();
        send(form);
    }
});

function send(form) {

    var formData = { name: $("#name").val(),
        email: $("#email").val(),
        phone: $("#phone").val(),
        message: $("#message").val(),
    };

    $.ajax({
        type: "POST",
        url: "/scripts/mailer.php",
        datatype: "text",
        data: formData,
        succes: function (data) {
            onSucces();
        },
        error: function () {
            onError();
        }
    });
}

和我的简化 php 文件：

$myemail = "someone@something.com";
$subject = "test";

$message = $_POST["message"];

mail($myemail, $subject, $message);

echo "ok";

有人能指出我做错了什么吗？我也尝试过简单的 get 方法，但它们也无法到达服务器。

Answer 1

为你的 JavaScript 试试这个； success 错了，你的submit() 调用中有一个毫无意义的括号：

$(document).ready(function () {
    var form = $("#mail-form");
    form.submit(function (e) {
        send(form);
        e.preventDefault();
        return(false);
    });
});
function send(form) {
    var formData = {
        name: $("#name").val(),
        email: $("#email").val(),
        phone: $("#phone").val(),
        message: $("#message").val(),
    };
    $.ajax({
        type: "POST",
        url: "/scripts/mailer.php",
        datatype: "text",
        data: formData,
        success: function(data){
            onSucces();
        },
        error: function(){
            onError();
        }
    });
}

Answer 2

您永远不应该依赖客户端的数据验证。

对于您的问题，请使用 alert 确认没有执行成功或错误回调函数。您还可以删除 dataType 以查看是否有任何不同。

你也可以这样做

var formData = form.serialize();

而不是这个

var formData = { name: $("#name").val(),
    email: $("#email").val(),
    phone: $("#phone").val(),
    message: $("#message").val(),
};

Answer 3

像这样尝试：

改变：

$(document).ready(function () {
    var form = $("#mail-form");

    form.submit(function () {
        e.preventDefault();
        send(form);
        }
    });
});

到：

$("#mail-form").submit(function (e) {
        e.preventDefault();
        send(form);
});

所以它看起来像这样：

$("#mail-form").submit(function (e) {
        e.preventDefault();
        send(form);
});

function send(form) {

    var formData = { name: $("#name").val(),
        email: $("#email").val(),
        phone: $("#phone").val(),
        message: $("#message").val(),
    };

    $.ajax({
        type: "POST",
        url: "/scripts/mailer.php",
        datatype: "text",
        data: formData,
        success: function (data) {
            onSucces();
        },
        error: function () {
            onError();
        }
    });
}