Question

我回到了我一直在努力的同样的形式......我的问题是我可以正确地提交此表单，但错误响应不起作用。我看到响应在控制台中返回时出现错误，但它没有在我的响应中显示我的错误消息...我可以提交空的并且我的jQuery显示就好像它成功了，即使我的响应是：{{1 }或{"status":"error","message":"Name is blank"}

这是HTML

{"status":"error","message":"Email is blank or invalid"}

这是jQuery：

<div class="span6">
<h4>Ask us anything or request a quote:</h4>
<div id="form" style="padding-top: 1em;">
<form id="contactForm" name="contactForm" method="post">
<div class="controls">
<input class="span6" type="text" name="name" id="name" placeholder="What is your name?" required>
</div>
<div class="controls">
<input class="span6" type="email" name="email" id="email" placeholder="What is your email address?" required>
</div>
<div class="controls">
<textarea rows="3" class="span6" name="message" id="message" placeholder="How can we help you?"></textarea>
</div>
<div class="controls">
<input type="button" class="btn btn-primary" name="formSubmit" id="formSubmit" value="Send E-Mail">
</div>
</form>
</div>
<div id="thanks" style="display:none">
<h3>Thank you for that! <br>
<span class="muted"><small>We appreciate you getting in touch with us...</small></span></h3>
<p>We'll try to get back to you as soon as possible. We know your time is valuable, so we'll try as hard as we can not to waste it.</p>
</div>
<div id="error" style="display: none;">
<h3>Error <span class="muted"> Something in that message did not work right...</span></h3>
<p>Please <a href="#" class="btn btn-danger" id="restForm">CLICK HERE TO RESET THE FORM</a></p>
</div>
</div>
</div>

这是PHP：

    <script>
$(document).ready(function(){
    $('#formSubmit').click(function(){
        $.ajax({
            type: "POST",
            url: "php/contact.php",
            data: $("#contactForm").serialize(),
            dataType: "json",

                success: function(msg){
                $("#form").fadeOut('fast');
                $("#thanks").fadeIn('slow');
                $('#contactForm').get(0).reset();
                $('form[name=contactForm]').get(0).reset();                 
                },
                error: function(){
                $("#form").fadeOut('fast');
                $("#error").fadeIn('slow');
            }
        });
    });
});

Answer 1

如果我是你，我会使用类似jQuery validate插件的东西。这将在提交表单之前对其进行验证，这是一种更好的处理方式，因为它会减少您对服务器处理PHP的请求数量。

http://docs.jquery.com/Plugins/Validation/validate

Answer 2

问题是当你发回json时，你发现Ajax会出现“错误”，而json恰好有状态=错误。

您真正应该做的是设置一个http状态代码错误，该错误将触发错误处理程序。

Answer 3

您似乎对jQuery认为AJAX“错误”的内容感到困惑。在jQuery方面，你正在返回一个表示“错误”的项目并不会使它成为错误。如果调用的是指向404或500错误的URL（例如，您将其指向错误的服务器或该URL上没有服务），则会出错。

只要发出请求并成功检索到响应，jQuery很乐意它帮助您并将结果传递给“success”方法。您需要在成功中查看结果，看看JSON是否说它有效。如果是，则相应地更新显示，如果没有，则更新它以显示错误消息。

只有在实际无法对服务器进行AJAX调用并获得响应时才会触发错误方法。可能触发该事件的其他示例可能是超时或尝试调用除提供此页面的服务器之外的服务器。期望每隔一段时间获得成功。

鉴于您上面所说的回复格式：

  $.ajax({
    type: "POST",
    url: "php/contact.php",
    data: $("#contactForm").serialize(),
    dataType: "json",
    success: function(msg) {
      if (msg.status == "error") {
        // If we got an error message back in the JSON, replace our generic error
        // message with the more specific error the server sent.
        $("#form").fadeOut('fast');
        if (msg.message) {
          $("#errorMessage").html(msg.message);
        }
        $("#error").fadeIn('slow');
      } else {
        // The call succeeded.
        $("#form").fadeOut('fast');
        $("#thanks").fadeIn('slow');
        $('#contactForm').get(0).reset();
        $('form[name=contactForm]').get(0).reset();
      }
    },
    error: function() {
      $("#form").fadeOut('fast');
      $("#error").fadeIn('slow');
    }
  });

将这一点与HTML略有变化配对（请注意我在带有错误消息的范围上放置选择器）：

<div id="thanks" style="display:none">
<h3>Thank you for that! <br>
<span class="muted"><small>We appreciate you getting in touch with us...</small></span></h3>
<p>We'll try to get back to you as soon as possible. We know your time is valuable, so we'll try as hard as we can not to waste it.</p>
</div>
<div id="error" style="display: none;">
<h3>Error <span id="errorMessage" class="muted">Something in that message did not work right...</span></h3>
<p>Please <a href="#" class="btn btn-danger" id="restForm">CLICK HERE TO RESET THE FORM</a></p>
</div>

jQuery | AJAX | JSON表单提交，错误未触发。我错过了什么？

3 个答案: