javascript - Ajax请求表单提交问题

Question

我在尝试通过 ajax 提交表单时遇到了一些奇怪的问题。对于 $(form).on('submit')，这仍然有效，但它会重定向到 email.php 脚本，即使使用 preventDefault() 也是如此，但我得到了我的值并发送了电子邮件。

$('#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;
}

?>

Answer 1

您发送的不是键值对，而是一个字符串:

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

应该是:

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

或:

// you already generated an object with the data
data: data,

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

你真的应该捕获表单提交，以防有人没有按下按钮而是使用回车键:

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