0

我是一名最近的网络开发毕业生，有几年的网页设计经验。最近，我的（唯一一个！）客户要求重新填写他的表格。我一直在使用 PHP，我正在尝试使用 jQuery 以及服务器端验证来实现一些验证。

验证效果很好。当我禁用javascript时，虽然丑陋，但它仍然有效。在完成工作时，我想我会添加一点加载动画，然后显示“成功”消息，或者重新加载带有错误消息的表单。

提交后动画出现，但加载的只是一个空白页面。我期待收到邮件成功/失败消息，或者再次收到表单。

请参阅下面的代码。任何建议将不胜感激。

<?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>
4

2 回答 2

0 
url: thisForm,

应该：

url: thisForm.attr("action"),

您还可以简化获取字段值的代码：

var postData = thisForm.serialize();
于 2013-06-16T04:24:39.223 回答
0 
$("html").html(output);

无论是成功还是失败，您都将使用 ajax 调用返回的任何内容替换页面的整个内容。

由于这是一个自提交表单，因此根本不需要 ajax 调用。在这种情况submit下，删除以下行以使其正常提交：

e.preventDefault();

或者，如果您希望动画在表单提交之前发生，则离开preventDefault并使用fadeOut效果的回调来调用submit表单的方法。您可能需要一个布尔值来防止重复调用相同的代码。也就是说，将（全局）布尔值初始设置为false; 将其设置为首次调用代码true时；submit如果是这样，true则不要阻止默认行为（或启动动画）。

如果您希望表单提交异步发生- 也就是说，无需重新加载表单 - 那么您需要：

  • 创建一个单独的 PHP 页面/脚本来验证表单输入的详细信息
  • 此脚本返回 true 或 false，或包含错误详细信息的 json 对象
  • ajax 代码处理这些返回的详细信息，使用 JavaScript 修改页面内容（显示错误消息等）
  • 代码可以在submit发出 ajax 请求之前启动动画，并在调用完成时停止动画（成功或失败）。
于 2013-06-16T04:31:39.820 回答