0
HTML代碼AJAX動作沒有發生
<form class="ajax-form" id="contactForm" method="post" action="assets/php/contact.php">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Your Name..." value="" required>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Your email..." value="" required>
</div>
<div class="form-group">
<input type="phone" class="form-control" id="phone" name="phone" placeholder="Your phone..." value="" required>
</div>
<div class="form-group">
<textarea class="form-control" rows="4" name="message" placeholder="Your message..." required></textarea>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-default"><i class="fa fa-paper-plane fa-fw"></i> Send</button>
</div>
</form>
PHP代碼（contact.php）
header('Content-type: application/json');
if($_POST) {
$to_email = "[email protected]"; //Recipient email, Replace with own email here
//check if its an ajax request, exit if not
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {
$output = json_encode(array(//create JSON data
'type' => 'error',
'text' => 'Sorry Request must be Ajax POST'
));
die($output); //exit script outputting json data
}
//Sanitize input data using PHP filter_var().
$user_name = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
$user_email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$phone_number = filter_var($_POST["phone"], FILTER_SANITIZE_NUMBER_INT);
$message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
//additional php validation
if(strlen($user_name) < 4) { // If length is less than 4 it will output JSON error.
$output = json_encode(array(
'type' => 'error',
'text' => 'Name is too short or empty!'
));
die($output);
}
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)) { //email validation
$output = json_encode(array(
'type' => 'error',
'text' => 'Please enter a valid email!'
));
die($output);
}
if(!filter_var($phone_number, FILTER_SANITIZE_NUMBER_FLOAT)) { //check for valid numbers in phone number field
$output = json_encode(array(
'type' => 'error',
'text' => 'Enter only digits in phone number'
));
die($output);
}
if(strlen($message) < 3) { //check emtpy message
$output = json_encode(array(
'type' => 'error',
'text' => 'Too short message! Please enter something.'
));
die($output);
}
//email subject
$subject = 'New mail via contact form';
//email body
$message_body = $message . "\r\n\r\n-" . $user_name . "\r\n\r\nEmail : " . $user_email . "\r\nPhone Number : " . $phone_number;
//proceed with PHP email.
$headers = 'From: ' . $user_name . '<' . $user_email . '>' . "\r\n" . 'Reply-To: ' . $user_name . '<' . $user_email . '>' . "\r\n" . 'X-Mailer: PHP/' . phpversion();
$send_mail = mail($to_email, $subject, $message_body, $headers);
echo "<h1 style='color: red; font-size: 100px'>From contact.php</h1>";
if(!$send_mail) {
//If mail couldn't be sent output error. Check your PHP email configuration (if it ever happens)
$output = json_encode(array(
'type' => 'error',
'text' => 'Could not send mail! Please check your PHP mail configuration.'
));
die($output);
} else {
$output = json_encode(array(
'type' => 'success',
'text' => 'Hi ' . $user_name . ', thank you for your email, we will get back to you shortly.'
));
echo ($output);
}
}
AJAX代碼
$(function() {
// validate contact form on keyup and submit
$("#contactForm").validate({
rules: {
name: {
required: true,
minlength: 2,
lettersonly: true
},
email: {
required: true,
minlength: 6,
email: true
},
phone: {
required: true,
digits: true,
minlength: 10,
maxlength: 15
},
message: {
required: true,
minlength: 6
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Minimum 2 characters",
lettersonly: "Only letters please!"
},
email: {
required: "Please enter your email address",
minlength: "Minimum 6 characters",
email: "That's an invalid email"
},
phone: {
required: "Please enter your phone number",
digits: "Only digits (no spaces)",
minlength: "Minimum 10 characters",
maxlength: "Maximum 15 characters"
},
message: {
required: "Please enter your message",
minlength: "Minimum 6 characters"
}
},
success: function(label) {
label.addClass("valid").text("Perfect!");
},
submitHandler: function(element) {
var ajaxform = $(element),
url = ajaxform.attr('action'),
type = ajaxform.attr('method'),
data = {};
$(ajaxform).find('[name="submit"]').html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Sending...');
ajaxform.find('[name]').each(function(index, value) {
var field = $(this),
name = field.attr('name'),
value = field.val();
data[name] = value;
});
$.ajax({
url: url,
type: type,
data: data,
success: function(response) {
if (response.type == 'success') {
$("#contactForm").before("<div class='alert alert-success' role='alert'><a href='#' class='close' data-dismiss='alert'>×</a>" + response.text + "</div>");
$(ajaxform).each(function() {
this.reset();
$(this).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
}).find('.valid').each(function() {
$(this).remove('label.valid');
})
} else if (response.type == 'error') {
$("#contactForm").before("<div class='alert alert-danger' role='alert'><a href='#' class='close' data-dismiss='alert'>×</a>" + response.text + "</div>");
$(ajaxform).find('[name="submit"]').html('<i class="fa fa-paper-plane fa-fw"></i> Send');
}
}
});
return false;
}
});
的問題是，每當我點擊發送按鈕不執行任何操作。無論是正面還是負面。什麼都沒發生。
我想通過他輸入的電子郵件ID向用戶發送電子郵件。
你在控制檯中得到什麼？在JS中可能是錯誤的。 –
我什麼都沒有得到。那就是問題所在。或者它應該顯示成功或危險的對話框 –
您似乎缺少'}）;'在腳本的末尾。 – avonnadozie