没有使用.ajax加载PHP页面的输出
我是一名刚毕业的网络开发专业毕业生，有几年的网络设计经验。最近，我的（唯一的！）客户要求重新填写他的表格。我一直在使用PHP，我正在尝试使用jQuery和服务器端验证来实现一些验证 验证工作很好。当我禁用javascript时，虽然很难看，但它仍然可以工作。在完成任务时，我想我应该添加一点加载动画，然后显示一条“成功”消息，或者用错误消息重新加载表单 提交后会显示动画，但只会加载一个空白页面。我希望收到邮件成功/失败消息，或者再次发送表单 请参阅下面的代码。任何建议都将不胜感激没有使用.ajax加载PHP页面的输出,php,jquery,Php,Jquery,我是一名刚毕业的网络开发专业毕业生，有几年的网络设计经验。最近，我的（唯一的！）客户要求重新填写他的表格。我一直在使用PHP，我正在尝试使用jQuery和服务器端验证来实现一些验证 验证工作很好。当我禁用javascript时，虽然很难看，但它仍然可以工作。在完成任务时，我想我应该添加一点加载动画，然后显示一条“成功”消息，或者用错误消息重新加载表单 提交后会显示动画，但只会加载一个空白页面。我希望收到邮件成功/失败消息，或者再次发送表单 请参阅下面的代码。任何建议都将不胜感激 <?php
<?php @require_once("js/mail.php"); ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mail Testing</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('form').submit(function(e){
e.preventDefault();
var thisForm = $(this);
var txt_name = $("#name").val();
var txt_email = $("#email").val();
var txt_comments = $("#comments").val();
var postData = {
"name" : txt_name,
"email" : txt_email,
"comments" : txt_comments,
};
$(this).fadeOut(function(){
$("#loading").fadeIn(function(){
$.ajax({
type: "POST",
url: thisForm,
data: postData,
success: function(output) {
$("#loading").fadeOut();
$("html").html(output);
},
error: function(output) {
$("#loading").fadeOut();
$("html").html(output);
}
});
});
});
});
});
</script>
<style type='text/css'>
body {
font-size: 8pt;
font-family: Arial, Helvetica, sans-serif;
}
#wrapper { padding: 3em; }
.container {
display: inline-block;
background-color: white;
box-shadow: 0 0 0 6px rgba(0,0,0, .1) inset, 0 0 12px 0 rgba(0, 0, 0, 0.22);
border: 1px solid rgba(0,0,0,.3);
}
.container_inner {
padding: .5em 1.3em;
}
p div, input[type='text'], textarea { text-align: left; width: 100%; padding-right: 1.3em }
p:last-child {
text-align: right;
}
label { text-align: left; }
.error {
color: rgba(255,0,0,1);
padding-left: .8em;
}
.label, .error { display: inline; }
#loading, #success, #error {display: none}
input[type="text"], textarea {
padding: .3em .6em;
display: inline-block;
text-align: left;
width: 92%;
background: rgb(255,255,255); /* Old browsers */
border-radius: 6px;
box-shadow: 1px 0 3px rgba(0,0,0, .4);
border: 1px solid rgba(0,0,0, .6);
}
</style>
</head>
<body>
<div id="wrapper">
<div class="container">
<div class="container_inner">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="Reservations">
<p>
<div>
<label for="name">Name</label><?php if (isset($field_errors['name'])) { echo $field_errors['name']; } ?>
</div>
<input type="text" name="name" id="name" value="<?php if (isset($name)) { echo $name; } ?>" />
</p>
<p>
<div>
<label for="email">Email</label><?php if (isset($field_errors['email'])) { echo $field_errors['email']; }?>
</div>
<input type="text" name="email" id="email" value="<?php if (isset($email)) { echo $email; } ?>" />
</p>
<p>
<div>
<label for="comments">Comments</label><?php if (isset($field_errors['comments'])) { echo $field_errors['comments']; } ?>
</div>
<textarea name="comments" id="comments" value="<?php if (isset($comments)) { echo $comments; }?>"></textarea>
</p>
<p>
<?php echo recaptcha_get_html($publickey, $error); ?>
</p>
<p>
<input type="submit" name="btnSubmit" value="submit" />
</p>
</form>
<div id="loading">
<img src="images/loading.gif" />
</div>
<div id="success">
<h1>Thank you for your request.</h1>
</div>
<div id="error">
<h1>Message could not be sent.</h1>
</div>
</div><!-- container_inner -->
</div><!-- container -->
</div><!-- wrapper -->
</body>
</html>
邮件测试
$（函数（）{
$（'form'）。提交（函数（e）{
e、 预防默认值（）；
var thisForm=$（本）；
var txt_name=$（“#name”）.val（）；
var txt_email=$（“#email”）.val（）；
var txt_comments=$（“#comments”）.val（）；
var postData={
“名称”：txt_名称，
“电子邮件”：txt_电子邮件，
“评论”：txt_评论，
};
$（this）.fadeOut（函数（）{
$（“#加载”）.fadeIn（函数（）{
$.ajax({
类型：“POST”，
网址：此表格，
数据：postData，
成功：功能（输出）{
$（“#加载”）.fadeOut（）；
$（“html”）.html（输出）；
},
错误：函数（输出）{
$（“#加载”）.fadeOut（）；
$（“html”）.html（输出）；
}
});
});
});
});
});
身体{
字号：8pt；
字体系列：Arial、Helvetica、无衬线字体；
}
#包装器{padding:3em；}
.集装箱{
显示：内联块；
背景色：白色；
盒影：0.06像素rgba（0,0,0,1）嵌入，0.12像素0像素rgba（0,0,0,0.22）；
边框：1px实心rgba（0,0,0,3）；
}
.集装箱内{
填充物：5em 1.3em；
}
p div，输入[type='text']，textarea{text align:左；宽度：100%；右填充：1.3em}
p:最后一个孩子{
文本对齐：右对齐；
}
标签{文本对齐：左；}
.错误{
颜色：rgba（255,0,0,1）；
左侧填充：.8em；
}
.label，.error{display:inline；}
#正在加载，#成功，#错误{显示：无}
输入[type=“text”]，textarea{
填充：.3em.6em；
显示：内联块；
文本对齐：左对齐；
宽度：92%；
背景：rgb（255255）；/*旧浏览器*/
边界半径：6px；
盒影：1px0 3pxRGBA（0,0,0,4）；
边框：1px实心rgba（0,0,0,6）；
}
应该是：
url: thisForm.attr("action"),
您还可以使用以下方法简化获取字段值的代码：
var postData = thisForm.serialize();
无论成功与否，您都将使用ajax调用返回的内容替换页面的全部内容
由于这是一个自提交表单，因此根本不需要ajax调用。在submit
事件中，删除以下行以允许其正常提交：
e.preventDefault();
或者，如果希望动画在提交表单之前发生，请保留preventDefault
，并使用fadeOut
效果的回调调用表单的submit
方法。您可能需要一个布尔值来防止重复调用同一代码。也就是说，将（全局）布尔值初始设置为false
；第一次调用submit
代码时，将其设置为true
；如果这是true
，则不要阻止默认行为（或启动动画）
如果希望表单提交以异步方式进行（即不重新加载表单），则需要：
- 创建一个单独的PHP页面/脚本，用于验证表单输入详细信息
- 此脚本返回true或false，或者返回包含错误详细信息的json对象
- ajax代码处理这些返回的细节，使用JavaScript修改页面内容（显示错误消息等）
submit
代码可以在制作ajax之前启动动画
请求，并在呼叫完成时停止（成功或失败时）
失败）
这不是我想要的吗？这是一个自提交表单，所以我希望完全返回，对吗？ajax的全部目的是不必重新加载页面。通常，处理请求的脚本在成功时返回一个值或一个对象，当前页面将对其进行检查和处理。我从来没有想过我正在使用.ajax重新加载同一个页面。请假设我正在获取一个单独的页面。为什么会这样？太好了！这产生了一个更令人期待的结果。不过，我在这里的工作受到了限制。正在返回页面，但“我的服务器端验证”均未运行。Google recatpcha是通过PHP插入的，它没有出现是告诉我这不会像我希望的那样工作的原因。用我在学校学到的知识，我真的应该知道这一点。
$("html").html(output);
e.preventDefault();