0

我回来了我一直在努力的同一张表格......我的问题是我可以让这个表格正确提交，但错误响应不起作用。我看到响应在控制台中返回并出现错误，但它没有在我的响应中显示我的错误消息......我可以提交空并且我的 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');
            }
        });
    });
});

这是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);
4

3 回答 3

0

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

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

于 2013-02-22T16:53:07.240 回答
0

问题是，当您发送回恰好包含 status=error 的 json 时，您期望 Ajax 出现“错误”。

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

于 2013-02-22T16:54:44.093 回答
0

您似乎对 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>
于 2013-02-22T17:06:56.750 回答