[英]Appending data and adding a class after a successful AJAX call with response from php echo
我正在尝试向我的 php 文件发送 AJAX 调用,以便在填写联系表格后发送电子邮件。 当我只是尝试从 php 获取回声响应并将其放在表单上方的 div 中时,我已经完美地工作了,但是我想附加一些数据并在它成功返回后添加一个类以使其更好看。 现在,使用此代码,电子邮件仍然通过,但消息或类没有显示。
我究竟做错了什么? 如何从 php 获取响应以显示在 contactSuccess div 中,同时附加所有内容并隐藏 contactSuccess div 直到它成功通过?
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("contactSend.php", $("#mycontactform").serialize(), function(response) {
//test
$('#contactMessageStatus').append(data);
$('#contactMessageStatus').addClass("contactSuccess");
$('html, body').animate({
scrollTop: $("#contactMessageStatus").offset().top
}, 2000);
//endtest
$('#contactMessageStatus').html(response);
//$('#success').hide('slow');
});
return false;
});
});
</script>
形式
<div id="contactMessageStatus"></div>
<form action="" method="post" id="mycontactform" >
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbar" name="email" placeholder="Email" required>
<input type="message" class="inputbar" name="message" placeholder="Message" required>
<input type="button" value="Send Message" id="submit">
</form>
CSS
#contactSuccess {
border-style: solid !important;
border-width: 1px !important;
background-position: 10px 9px !important;
background-repeat: no-repeat !important;
min-height: 24px !important;
padding: 8px 8px 8px 32px !important;
font-size: 11px !important;
font-weight: bold !important;
border-color: #446423;
background-color: #eff5ea;
background-image: url(success_check.gif);
color: #3d6611;
}
PHP 文件 - 添加这个以防万一
<?php
// Here we get all the information from the fields sent over by the form.
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$to = 'contact@example.com';
$subject = 'SFL Contact Form Submitted';
$message = 'FROM: '.$name. ' ' . ' Email: '.$email. ' ' . 'Message: '.$message;
$headers = 'From: contact@example.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{
echo "Invalid Email, please provide an correct email.";
}
?>
问题很可能出在您的 $.post 响应处理程序中。 尝试显示响应之前的行之一可能是引发异常。 我的怀疑是线路...
$('#contactMessageStatus').append(data);
...但这只是因为我看不到您从哪里获取“数据”。
将响应处理程序中的那部分代码包装在 try / catch 块中,然后查看异常是否真的导致了此问题。
更改 $('#contactMessageStatus').append(data); 到 $('#contactMessageStatus').append(response);
根据 PHP 的响应在脚本中添加了 if else 语句。
<script>
$(document).ready(function(){
$('#submit').click(function(){
$.post("contactSend.php", $("#mycontactform").serialize(), function(response) {
//test
if(response == 'Your email was sent!')
{
$('#contactMessageStatus').append(response);
$('#contactMessageStatus').addClass("contactSuccess");
$('html, body').animate({
scrollTop: $("#contactMessageStatus").offset().top
}, 2000);
//endtest
$('#contactMessageStatus').html(response);
//$('#success').hide('slow');
}
else
{
//error handling code
}
});
return false;
});
});
</script>
$(document).ready(function () {
$("#frm-comment").on('submit',function (e) {
e.preventDefault();
$.ajax({
success: function(response) {
$("#showcomments").prepend(response);
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.