电子邮件发送表单 PHP 而不刷新（JQuery 和 Ajax）答案

【问题标题】：Email Send Form PHP without refresh (JQuery and Ajax)电子邮件发送表单 PHP 而不刷新（JQuery 和 Ajax）
【发布时间】：2017-03-11 21:13:05
【问题描述】：

我正在尝试使用 php 在 html 中创建电子邮件表单，并且很多人都知道在按下提交按钮后页面会重新加载，我试图避免这种情况。我知道你可以用 Jquery 和 AJAX 做到这一点进一步继承我的代码：

HTML 和 AJAX (test.html)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <form method="POST" id="contact">
        <div class="form-group">
            <label for="name">Voornaam*</label>
            <input name="fn" type="text" class="form-control" id="fn" aria-describedby="nameHelp" placeholder="John Doe" required>
        </div>
        <div class="form-group">
            <label for="name">Achternaam*</label>
            <input name="ln" type="text" class="form-control" id="ln" aria-describedby="nameHelp" placeholder="John Doe" required>
        </div>
        <div class="form-group">
            <label for="email">Email-address*</label>
            <input name="email" type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="john@doe.com" required>
        </div>
        <div class="form-group">
            <label for="message">Bericht*</label>
            <textarea name="message" required class="form-control" id="message" rows="6"></textarea>
        </div>
        <input type="button" id="submit" value="Verstuur" class="btn btn-primary">
        <div id="result">
            <p id="result">Testing</p>
        </div>
    </form>




    <script type="text/javascript">
        $(function(){
            $('input[type=button] ').click(function(){
                $.ajax({
                    type: "POST",
                    url: "sendmail.php",
                    data: $("#contact").serialize(),
                    beforeSend: function(){
                        $('#result').html('<img src="img/loading.gif" />');
                    },
                    succes: function(data){
                        $('#result').html(data);
                    }
                });
            });
        });
    </script>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</body>

</html>

PHP (sendmail.php)

<?php
if(isset($_POST['submit'])){
    $to = "23179@ma-web.nl"; // this is your Email address
    $from = $_POST['email']; // this is the sender's Email address
    $fn = $_POST['fn'];
    $ln = $_POST['ln'];
    $messagemail = $_POST['message'];
    $subject = "Form submission";
    $subject2 = "Copy of your form submission";
    $message = $fn . " " . $ln . " wrote the following:" . "\n\n" . $messagemail;
    $message2 = "Here is a copy of your message " . $fn ." ". $ln ."\n\n" . $messagemail;

    mail($to,$subject,$message);
    mail($from,$subject2,$message2); // sends a copy of the message to the sender
}

【问题讨论】：

从你看到的例子中，你有没有尝试过什么？你在哪里卡住了？网上有关于如何使用 AJAX 的教程和示例，Stack Overflow 并没有真正寻求取代那些教程。
我尝试了多个示例，不太了解它们是如何工作的
如果您遇到特定问题，我们可以提供帮助。 “教我 AJAX”对于 Stack Overflow 问题来说太宽泛了。我们给出的任何例子都不会比已经存在的无数例子更好，包括已经存在于许多 Stack Overflow 问题中的例子。
我已经编辑了脚本，现在有一个例子，它不工作，所以我需要帮助它仍然在刷新并且不发送电子邮件
如果 PHP 代码正在执行但电子邮件正在发送，您可以在此处执行一些调试步骤：stackoverflow.com/questions/24644436/…

标签： javascript php jquery html ajax

【解决方案1】：

这里可以查看测试代码：

将以下代码添加到您的 html 文件中：

var data = {
name: $("#fn").val(),
email: $("#email").val()
 };

$.ajax({
type: "POST",
url: "email.php",/*php file path*/
data: data,
success: function(){
    $('.success').fadeIn(1000);
}

});

【讨论】：