这个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.
}
});
});