如何发送html电子邮件注册表单php,将自动电子邮件我使用ajax


How to send html email sign up form to php that will auto-email me using ajax?

这个html表单收集一个电子邮件地址。我希望用户提供的电子邮件地址自动通过电子邮件发送给我。在过去,我使用PHP来完成这一点没有问题,但现在我希望用户永远不必离开页面并获得确认提交的消息…所以我想使用我从未使用过的ajax。

<!-- Signup Form -->
        <form id="signup-form" method="post" action="">
            <input type="email" name="email" id="email" placeholder="Email Address" />
            <input type="submit" value="Make a Request" />
        </form>

这是一个名为"contact-form-handler.php"的php文件,简化了,现在还缺乏验证。(我的坏)

<?php
$myemail = 'myemail@gmail.com';
$email_address = $_POST['email']; 
$to = $myemail;
$email_subject = "Someone visited RK" ;
$email_body = "You have received a new message. "
" Here are the details:"
"Email: $email_address";
$headers = "From: $myemail'n";
$headers = "Reply-To: $email_address"; 
mail($to,$email_subject,$email_body,$headers);
?>

请注意,当引用它的位置时,这个php位于与我的js不同的文件夹中。(文件结构分别为:assets/php/contact-form-handler.php和:assets/js/main.js)

好的,最后main.js文件来自一个模板,这是我的问题出现的地方。它是这样的://注册表单。(函数(){

        // Vars.
            var $form = document.querySelectorAll('#signup-form')[0],
                $submit = document.querySelectorAll('#signup-form input[type="submit"]')[0],
                $message;
        // Bail if addEventListener isn't supported.
            if (!('addEventListener' in $form))
                return;
        // Message.
            $message = document.createElement('span');
                $message.classList.add('message');
                $form.appendChild($message);
            $message._show = function(type, text) {
                $message.innerHTML = text;
                $message.classList.add(type);
                $message.classList.add('visible');
                window.setTimeout(function() {
                    $message._hide();
                }, 3000);
            };
            $message._hide = function() {
                $message.classList.remove('visible');
            };
        // Events.
        // Note: If you're *not* using AJAX, get rid of this event listener.
             $form.addEventListener('submit', function(event) {
                event.stopPropagation();
                event.preventDefault();
                // Hide message.
                     $message._hide();
                // Disable submit.
                     $submit.disabled = true;
                // Process form.



                // Note: Doesn't actually do anything yet (other than report back with a "thank you"),
                // but there's enough here to piece together a working AJAX submission call that does.
                    window.setTimeout(function() {
                        // Reset form.
                            $form.reset();
                        // Enable submit.
                            $submit.disabled = false;
                        // Show message.
                            $message._show('success', 'Thank you! RK will be in touch with you soon.');
                            //$message._show('failure', 'Something went wrong. Please try again.');
                    }, 750);

            });
    })();
})(); 
我完全理解曾经有过类似的问题。我到处都找过了,但是对于一个基本的初学者来说,没有什么是足够清楚的。回答时,请解释ajax代码的每一行,以便我知道发生了什么。由于

试试这个

$("#signup-form").submit(function(){
   var email_address = $("#email").val();
   $.ajax({
      type: "POST",
      url: "contact-form-handler.php",
      data: {email:email};
      success: function(data) {
          $("#sameWhereDivID").text(data);
          //Please echo your message in your PHP file and use .text to print the successful or failure message in your page.
      }
   });
});