javascript - 单击html按钮后无法回显任何内容
问题描述
我正在制作一个网站，需要一个联系页面，当人们按下发送时会向我发送电子邮件。我有三个文件，一个contactus.html，其中包括表单和一个发送按钮，一个contact.js，它使用jquery验证contactus.html中的所有框都已填写，以及一个contact_process.php文件发送单击发送按钮后给我的电子邮件。到目前为止，代码大部分都可以正常工作，并且每次都会向我发送一封电子邮件，以及如果有人尝试在未填写所有表格的情况下发送它，他们将无法发送，但我想在邮件发送后回显一些内容sent 告诉用户他们的消息已收到。
我使用了这段代码，它发送了电子邮件，但之后没有回显任何内容（您可能会注意到，从技术上讲，此表单允许某人根本不输入任何内容并仍然按发送，但是，我的 contact.js 验证联系表单是否是空的）。
<?php
// Send email
if (isset($_POST['message']) and isset($_POST['name']) and isset($_POST['email']) and
isset($_POST['number']) and isset($_POST['subject'])) {
$message = $_POST['message'];
$name = $_POST['name'];
$email = $_POST['email'];
$number = $_POST['number'];
$subject_of_sender = $_POST['subject'];
$to = "email@domain.com";
$subject = "New Email"; // Email Subject
$body = "You have recieved a message from: $name\n Subject: $subject_of_sender \n Email: $email \n Phone Number: $number \n Message: \n $message";
$headers = "From: email@domain.com";
$send = mail($to, $subject, $body, $headers);
if ($send) {
echo 'thanks'; // This is where it won't echo anything
} else {
echo 'error';
}
}
?>
有什么办法可以在单击“发送”按钮后向用户回显一条消息？这是我的contactus.html（这只是仅包含表单的代码片段）
<div class="col-lg-8">
<form class="form-contact contact_form" action="contact_process.php" method="post" id="contactForm" novalidate="novalidate">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<input class="form-control valid" name="name" id="name" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your name (Required)'" placeholder="Enter your name (Required)">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control valid" name="email" id="email" type="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter email address (Required)'" placeholder="Email (Required)">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<input class="form-control valid" name="number" id="number" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter your phone number (Required)'" placeholder="Enter your phone number (Required)">
</div>
</div>
<div class="col-12">
<div class="form-group">
<input class="form-control" name="subject" id="subject" type="text" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Subject (Required)'" placeholder="Enter Subject (Required)">
</div>
</div>
<div class="col-12">
<div class="form-group">
<textarea class="form-control w-100" name="message" id="message" cols="30" rows="9" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Message (Required)'" placeholder=" Enter Message (Required)"></textarea>
</div>
</div>
</div>
<div class="form-group mt-3">
<button type="submit" class="button button-contactForm boxed-btn">Send</button>
</div>
</form>
</div>
和我的contact.js
$(document).ready(function(){
(function($) {
"use strict";
jQuery.validator.addMethod('answercheck', function (value, element) {
return this.optional(element) || /^\bcat\b$/.test(value)
}, "type the correct answer -_-");
// validate contactForm form
$(function() {
$('#contactForm').validate({
rules: {
name: {
required: true,
},
subject: {
required: true,
},
number: {
required: true,
},
email: {
required: true,
email: true
},
message: {
required: true,
}
},
messages: {
name: {
required: "You must enter a name.",
},
subject: {
required: "You must enter a subject.",
},
number: {
required: "You must enter a phone number.",
},
email: {
required: "You must enter a email."
},
message: {
required: "You must enter a message.",
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
type:"POST",
data: $(form).serialize(),
url:"contact_process.php",
success: function() {
$('#contactForm :input').attr('disabled', 'disabled');
$('#contactForm').fadeTo( "slow", 1, function() {
$(this).find(':input').attr('disabled', 'disabled');
$(this).find('label').css('cursor','default');
$('#success').fadeIn()
$('.modal').modal('hide');
$('#success').modal('show');
})
},
error: function() {
$('#contactForm').fadeTo( "slow", 1, function() {
$('#error').fadeIn()
$('.modal').modal('hide');
$('#error').modal('show');
})
}
})
}
})
})
})(jQuery)
})
解决方案
我会像这样返回json：
if ($send) {
$success = 1;
$message = 'Some success message';
} else {
$success = 0;
$message = 'Some error message';
}
$data = [
'success' => $success,
'message' => $message ,
];
echo json_encode($data);
然后将我的成功处理程序更改为：
success: function(response) {
if (response.success) {
$('#success').fadeIn()
// show response.message in the html somewhere
} else {
$('#error').fadeIn()
// show response.message in the html somewhere
}
// ... other stuff...
},
要点是，当您从 php 脚本中回显数据时，ajax 调用 js 需要检查响应并对其进行处理。我选择回显 json 而不仅仅是一个字符串消息，因为我认为它更干净，尽管你也可以这样做。
有关此方法的更多信息，请参阅本文。