Question

尝试通过ajax提交表单时，我遇到了一些奇怪的问题。对于$（表单）.on（＆＃39; submit＆＃39;），这可行，但即使使用preventDefault（），它也会重定向到email.php脚本，但我会传递我的值并发送电子邮件。

$（＆＃39;＃submit＆＃39;）on（＆＃39; click＆＃39;）在请求有效负载中显示它正在发送，但是电子邮件被触发，导致没有内容，但页面没有重新加载。

$(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: { "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();

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

如果有人没有按下按钮但是使用回车键，你真的应该抓住表单提交：

tabindex

Ajax请求表单提交问题

1 个答案: