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

Question

我回来了，我一直在努力与...我的问题是，我可以得到此表单提交正确，但错误响应不起作用。我发现响应在控制台中返回时出现错误，但它不会在我的响应中显示错误消息...我可以提交空白和我的jQuery显示，就像它的成功一样，即使我的回应是：{"status":"error","message":"Name is blank"}或{"status":"error","message":"Email is blank or invalid"}

这里的HTML

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

这里是jQuery的：

<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'); 
      } 
     }); 
    }); 
}); 

这里” s PHP：

function checkEmail($email){ 

if(eregi("^[a-zA-Z0-9_]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$]", $email)){ 
    return FALSE; 
} 

list($Username, $Domain) = split("@",$email); 

if(@getmxrr($Domain, $MXHost)){ 
    return TRUE; 

} else { 
    if(@fsockopen($Domain, 25, $errno, $errstr, 30)){ 
     return TRUE; 
    } else { 

     return FALSE; 
    } 
} 
} 

$response_array = array(); 

if(empty($_POST['name'])){ 

//set the response 
$response_array['status'] = 'error'; 
$response_array['message'] = 'Name is blank'; 

} elseif(!checkEmail($_POST['email'])) { 

//set the response 
$response_array['status'] = 'error'; 
$response_array['message'] = 'Email is blank or invalid'; 

} else { 

//send the email 
$body = $_POST['name'] . " sent you a message\n"; 
$body .= "Details:\n\n" . $_POST['message']; 
mail($_POST['email'], "SUBJECT LINE", $body); 

//set the response 
$response_array['status'] = 'success'; 
$response_array['message'] = 'Email sent!'; 

} 

echo json_encode($response_array); 

Answer 1

你似乎对jQuery认为AJAX“错误”感到困惑。就jQuery而言，您返回的内容中包含“错误”的项目并不会造成错误。如果调用的URL为404或500错误（例如，将其指向错误的服务器或该URL没有服务），那么这是错误的。

只要提出请求并成功检索到响应，jQuery很高兴它可以帮助您并将结果传递给“成功”方法。你需要看看你的成功之后的结果，看看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> 

Answer 2

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

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

Answer 3

的问题是，你期望阿贾克斯为“错误”，当你发回的JSON恰好有状态=错误的。

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