php ajax聯系表格
[英]php ajax contact form
問題描述
我使用以下代碼使用php和ajax構建聯系表單：
HTML：
<head>
<script src="js/app.js"></script>
</head>
<body>
<form id="ajax-contact" method="post" action="php/mailer.php">
<input type="text" id="name" name="name" required>
<input type="text" id="email" name="email" required>
<textarea id="message" name="message" required></textarea>
<input class="submit" type="submit" value="Send">
</form>
<div id="form-messages">
</div>
</body>
AJAX：
$(function() {
var form = $('#ajax-contact');
var formMessages = $('#form-messages');
});
$(form).submit(function(event) {
event.preventDefault();
});
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
}).done(function(response) {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
$('#name').val('');
$('#email').val('');
$('#message').val('');
}).fail(function(data) {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
MAILER：
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = strip_tags(trim($_POST["name"]));
$name = str_replace(array("\r","\n"),array(" "," "),$name);
$email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
$message = trim($_POST["message"]);
if ( empty($name) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400);
echo "Oops! There was a problem with your submission. Please complete the form and try again.";
exit;
}
$recipient = "mailreceiver@example.com";
$subject = "New contact from $name";
$email_content = "Name: $name\n";
$email_content .= "Email: $email\n\n";
$email_content .= "Message:\n$message\n";
$email_headers = "From: $name <$email>";
if (mail($recipient, $subject, $email_content, $email_headers)) {
http_response_code(200);
echo "Thank You! Your message has been sent.";
} else {
http_response_code(500);
echo "Oops! Something went wrong and we couldn't send your message.";
}
} else {
http_response_code(403);
echo "There was a problem with your submission, please try again.";
}
?>
在Ajax on action中，我加載php mailer文件以將郵件發送到當前的郵件地址，但我想在后台執行此操作，因為我正在使用ajax，因此不應加載該頁面...我想繼續表單的html頁面，而無需重定向到該php頁面發送該郵件，並且僅在div：form-messages中顯示成功或失敗。
我在這里想念什么？
3 個解決方案
解決方案1
0 2015-02-02 13:50:53
試試這個：
將您的輸入提交按鈕與“提交”類綁定，以使用ajax提交表單。 您可以使用$（form）[0] .reset（）;重置表單。 清楚輸入值的輸入
$('.submit').click(function() { //<-- changed/new
var form = $('#ajax-contact');
var formMessages = $('#form-messages');
var formData = $(form).serialize();
$.ajax({
type: 'POST',
url: $(form).attr('action'),
data: formData
}).done(function(response) {
$(formMessages).removeClass('error');
$(formMessages).addClass('success');
$(formMessages).text(response);
$(form)[0].reset(); //<-- changed/new
}).fail(function(data) {
$(formMessages).removeClass('success');
$(formMessages).addClass('error');
if (data.responseText !== '') {
$(formMessages).text(data.responseText);
} else {
$(formMessages).text('Oops! An error occured and your message could not be sent.');
}
});
});
解決方案2
0
嘗試這樣的事情：
$('.submit').click(function(event) {
//use this to dont submit the form
event.preventDefault();
//your ajax stuff
$.ajax....
//if you dont want to use the preventDefault function just
return false;
}
解決方案3
0 2015-02-02 14:24:56
嘗試刪除action="php/mailer"並執行以下操作
function sendEmail(message){
var data = new XMLHttpRequest();
data.open("POST","php/mailer.php");
data.onreadystatechange = function(){
if(data.readyState === 4 && data.status === 200){
document.getElementById('results').innerHTML = "Email sent";
}
}
data.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
data.send("message=" + message);
}
您可以在“提交”按鈕中調用該函數。
聯系表單 Ajax、php、Jquery：
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.