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";

有人可以指出我做错了什么吗？我也试过easy 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();
        }
    });
}

jQuery Ajax请求没有到达PHP脚本

3 个答案: