Javascript 不刷新的电子邮件发送表单PHP（JQuery和Ajax）_Javascript_Php_Jquery_Html_Ajax

Javascript 不刷新的电子邮件发送表单PHP（JQuery和Ajax）

javascript php jquery html ajax

Javascript 不刷新的电子邮件发送表单PHP（JQuery和Ajax）,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我试图用php制作一个html格式的电子邮件表单，很多人都知道在按下提交按钮后页面会重新加载，我试图避免这种情况。我知道使用Jquery和AJAX可以做到这一点，我已经看到了很多关于它的Stackoverflow问题，但作为一个非英语母语的人，我仍然不理解它，我希望人们能进一步向我解释我的代码： HTML&ajaxtest.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="

我试图用php制作一个html格式的电子邮件表单，很多人都知道在按下提交按钮后页面会重新加载，我试图避免这种情况。我知道使用Jquery和AJAX可以做到这一点，我已经看到了很多关于它的Stackoverflow问题，但作为一个非英语母语的人，我仍然不理解它，我希望人们能进一步向我解释我的代码：

HTML&ajaxtest.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
}

您可以在此处检查测试代码：

将以下代码添加到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);
}

})

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