Ajax请求表单提交问题 - Ajax request form submit issue

Ajax request form submit issue

本文关键字：问题表单提交请求 Ajax | 更新日期: 2023-09-26

我在尝试通过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;
}
?>

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

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();