Javascript Ajax请求表单提交问题

我在尝试通过ajax提交表单时遇到了一些奇怪的问题。对于（'submit'）上的$（form）.on，即使使用preventDefault（），它仍然可以重定向到email.php脚本，但是我传递了我的值，并发送了电子邮件

$（“#submit”）.on（'click'）在请求负载中显示它正在被发送，但是电子邮件被触发，导致没有内容，但页面不会重新加载

$(function(){
    var form = document.getElementById('ajax-contact');

    // $(form).on('sumbit', function(e){    // This works but redirects to the email processing page.
    $('#submit').on('click', function(e){
        var data = {
            name: $("input[name='name']").val(),
            email: $("input[name='email']").val(),
            message: $("input[name='message']").val()
        };

        $.ajax({
            type: "POST",
            url: "/api/email.php",
            contentType: "application/json",
            data: JSON.stringify({ "email": $("#email").val(), "name": $("#name").val(), "message": $("#message").val() }),
            beforeSend: function(){
                $("#submit").attr("value","Processing your request...");
            },
            success: function(data){
                $("#submit").attr("value","Thank you, I will get back to you as soon as possible.");
            },
            error: function(xhr, textStatus){
                if(xhr.status === 404) {
                    $('#submit').attr("value","There was an ERROR processing your request");
                }
            }
        });

        e.preventDefault();
    });
});

下面是php脚本

<?php

if($_SERVER['REQUEST_METHOD'] === 'POST') {
    echo 'Email Processed';
    $recipient = 'pete.robie@gmail.com';

    $name = $_POST['name'];
    $email = $_POST['email'];
    $msg = $_POST['message'];

    $msg_body = "Name: " . $name . "Email: " . $email . 'Message: ' . $msg;

    mail($recipient,'Message from: ' . $name ,  $msg_body);
} else {
    return;
}

?>

---

您没有向服务器发送键值对，而是发送一个字符串：

data: JSON.stringify({ "email": $("#email").val(), "name": $("#name").val(), "message": $("#message").val() }),

应该是：

data: { "email": $("#email").val(), "name": $("#name").val(), "message": $("#message").val() },

或：

实际上，您可以发送字符串，但需要读取原始输入

如果有人没有按下按钮而是使用enter键，您确实应该捕获表单提交：

$(form).on('submit', function(e){
            ^^^^^^ small typo here
  e.preventDefault();

---

如果表单中存在代码

action

属性，请删除该属性。还有

e.preventDefault（）

没有吗？通常

e.preventDefault（）

放在顶部，但这可能不是问题的原因。您能否创建一个复制问题的提琴。请注意，您的定期提交可能是由事件处理程序中的键入造成的，

sumbit

应该是

submit

。谢谢大家。我让它与一些示例代码一起工作。我会回到这里，但是o型很可能是因为看了太久而被忽略了。

$(form).on('submit', function(e){
            ^^^^^^ small typo here
  e.preventDefault();