Question

我正在尝试使用php在html中创建一个电子邮件表单，并且很多人都知道在按下提交按钮后页面重新加载，我试图避免这种情况。我知道你可以用Jquery和AJAX做到这一点我已经看到很多关于它的Stackoverflow问题给出了解决方案但是我仍然不认为它是一个非母语的英语我希望如果人们向我解释一下继续我的代码：

HTML＆amp; 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
}

Answer 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);
}

}）;

电子邮件发送表单PHP无需刷新（JQuery和Ajax）

1 个答案: