【问题标题】:Send mail form with AJAX (JavaScript & PHP) doesn't work [closed]使用 AJAX(JavaScript 和 PHP)发送邮件表单不起作用 [关闭]
【发布时间】:2021-05-20 18:11:12
【问题描述】:

我是 Stack Overflow 的新手。 我想在我的网站上创建一个简单的电子邮件表单,所以我复制了一个,但无法使用。 “发送”按钮似乎没有做任何事情。 我不是程序员,对代码知之甚少

一位朋友告诉我,好像 PHP 无法识别。

在遵循一些建议后,我现在可以使用“发送”按钮,但我收到“无法发送邮件”弹出消息。

PHP 文件在第 52 行(退出;)给出“语法错误,意外 $EOF”消息 不确定这是否是阻止 PHP 运行的原因...

HTML 代码

<form id="contact-form" action="" method="POST" class="tm-contact-form">
    <div class="form-group">
        <input type="text" name="name" class="form-control rounded-0" placeholder="Full Name" required />
    </div>
    <div class="form-group">
        <input type="email" name="email" class="form-control rounded-0" placeholder="Email" required />
    </div>
    <div class="form-group">
        <select class="form-control" id="contact-select" name="inquiry">
            <option value="-">Subject</option>
            <option value="3DPrints">3D Prints</option>
            <option value="AmpsEffects">Amps &amp; Effect Pedals</option>
            <option value="Other">Other</option>
        </select>
    </div>
    <div class="form-group">
        <textarea rows="8" style="resize: none;" name="message" class="form-control rounded-0" placeholder="Message" required></textarea>
    </div>
    <div class="form-group mb-4">
        <div id="result-message" class="alert alert-success d-none">Send result message will display here</div>
    </div>
    <div class="form-group tm-text-right">
        <button type="submit" class="tm-btn tm-btn-primary">Send</button>
    </div>
</form>

JS 文件

jQuery(function ($) { // DOM ready and $ alias in scope

    const $message = $("#result-message");

    $("#contact-form").on("submit", function (e) {
        e.preventDefault();
        const FD = new FormData(this);

        $message.text("Sending email...").removeClass("d-none");

        $.ajax({
            type: "POST",
            url: "js/call-form.php",
            dataType: "json", // Expected response format
            processData: false,
            contentType: false,
            data: FD,
        })
            .always(function (data) {
                $message.text(data.message).addClass(data.status === "error" ? "alert-danger" : "alert-success");
            })
            .fail(function (err) {
                $message.text("!!! Could not send email").addClass("alert-danger");
            });
    });

});

PHP 文件

<?php

if (
    isset($_POST['name']) &&
    isset($_POST['email']) &&
    isset($_POST['inquiry']) &&
    isset($_POST['message'])
) {

    $to = "info@hemmelaudio.com";
    $subject = $_POST['inquiry'];
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $html = <<<EX
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>$subject</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <table width="100%" style="border-collapse: collapse;">
            <tbody>
                <tr><th>From:</th><td>$name</td></tr>
                <tr><th>Email:</th><td>$email</td></tr>
                <tr><th>message:</th><td>$message</td></tr>
            </tbody>
        </table>
    </body>
    </html>
EX; // !! Don't indent this line !!

    $headers  = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8\r\n";
    $headers .= "From: Hemmelaudio.com\r\n";

    $isSent = mail($to, $subject, $html, $headers);
    echo json_encode([
        "status" => ($isSent ? "success" : "error"),
        "message" => ($isSent ? "Email is sent" : "Email is not sent"),
    ]);
} else {
    echo json_encode([
        "status" => "error",
        "message" => "Missing fields"
    ]);
}

exit;

我已将 PHP 文件设置为 755 权限。

请帮忙! 谢谢

【问题讨论】:

  • 您的表单标签在 action 属性中没有任何内容。它应该具有 PHP 文件的路径。否则,表单不知道将数据发送到哪里。
  • @SloanThrasher 你忘了他不一定需要一个,因为他使用 $.ajax 的url:
  • 您在哪里托管您的网站?
  • 什么是文件夹结构?可能ajax调用里面的url是错误的。
  • WHC.ca 上的托管网站

标签: javascript php html json ajax


【解决方案1】:
  • 将 FormData API 与 $.ajax 的 processData: false,contentType: false, 一起使用
  • 使用dataType: "json", 而不是dataType: "test/json",
  • 如果您要定义响应状态,请使用$.ajax.always()
  • 了解Heredoc 的好处
  • 使用正确的 HTML 电子邮件文档类型
  • 使用&lt;label&gt; 作为包装器。
  • '.$_POST['inquiry'].' ?!请使用更好的代码编辑器。它会为您突出显示错误。

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>MY PAGE</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <style>
            label.form-group {
                display: block;
                max-width: none;
            }
            textarea {
                resize: vertical;
            }
        </style>
    </head>

    <body>
        <form id="contact-form" action="" method="POST" class="tm-contact-form">
            <label class="form-group">
                <span class="control-label col-lg-3">Full name:</span>
                <input type="text" name="name" class="form-control" placeholder="Full Name" required value="Lorem Ipsum" />
            </label>

            <label class="form-group">
                <span class="control-label col-lg-3">Email:</span>
                <input type="text" name="email" class="form-control" placeholder="Full Name" required value="text@example.com" />
            </label>

            <label class="form-group">
                <span class="control-label col-lg-3">Subject:</span>
                <select class="form-control" name="inquiry" required>
                    <option value="3DPrints">3D Prints</option>
                    <option value="AmpsEffects">Amps &amp; Effect Pedals</option>
                    <option value="Other">Other</option>
                </select>
            </label>

            <label class="form-group">
                <span class="control-label col-lg-3">Message:</span>
                <textarea name="message" class="form-control" placeholder="Message" required>Test message</textarea>
            </label>

            <div id="result-message" class="d-none form-group mb-4 alert alert-primary"></div>

            <div class="form-group tm-text-right">
                <button type="submit" class="tm-btn tm-btn-primary">Send</button>
            </div>
        </form>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <script
            src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"
        ></script>
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"
        ></script>
        <script src="js/send-email-ajax.js"></script>
    </body>
</html>

js/send-email-ajax.js

jQuery(function ($) { // DOM ready and $ alias in scope

    const $message = $("#result-message");

    $("#contact-form").on("submit", function (e) {
        e.preventDefault();
        const FD = new FormData(this);

        $message.text("Sending email...").removeClass("d-none");

        $.ajax({
            type: "POST",
            url: "js/call-form.php",
            dataType: "json", // Expected response format
            processData: false,
            contentType: false,
            data: FD,
        })
            .always(function (data) {
                $message.text(data.message).addClass(data.status === "error" ? "alert-danger" : "alert-success");
            })
            .fail(function (err) {
                $message.text("!!! Could not send email").addClass("alert-danger");
            });
    });

});

js/call-form.php:

<?php

if (
    isset($_POST['name']) &&
    isset($_POST['email']) &&
    isset($_POST['inquiry']) &&
    isset($_POST['message'])
) {

    $to = "info@hemmelaudio.com";
    $subject = $_POST['inquiry']; // '.$_POST['inquiry'].'; ?! please, use a better code editor
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $html = <<<EX
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en-GB">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>$subject</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>
    <body>
        <table width="100%" style="border-collapse: collapse;">
            <tbody>
                <tr><th>From:</th><td>$name</td></tr>
                <tr><th>Email:</th><td>$email</td></tr>
                <tr><th>message:</th><td>$message</td></tr>
            </tbody>
        </table>
    </body>
    </html>
EX; // !! Don't indent this line !!

    $headers  = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=utf-8\r\n";
    $headers .= "From: Hemmelaudio.com\r\n";

    $isSent = mail($to, $subject, $html, $headers);
    echo json_encode([
        "status" => ($isSent ? "success" : "error"),
        "message" => ($isSent ? "Email is sent" : "Email is not sent"),
    ]);
} else {
    echo json_encode([
        "status" => "error",
        "message" => "Missing fields"
    ]);
}

exit;

【讨论】:

  • 我尝试将 js 和 PHP 更改为您放置的内容,但是 PHP 上有一个“意外的 EOF”。我正在想办法解决这个问题。
  • 好吧,奇怪的原因是“//!!不要缩进这一行!!”正在干扰解析。删除后,PHP 代码就可以工作了。
猜你喜欢
  • 2014-07-05
  • 2020-08-30
  • 1970-01-01
  • 2015-08-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-07-21
  • 2018-10-11
相关资源
最近更新 更多