如何在收到 JSON 的響應時隱藏 email 表單

Question

我正在嘗試使用字段驗證創建一個 email 表單，但我的 jQuery 腳本遇到問題。 該腳本從我使用json_encode()的 PHP 腳本獲取消息響應。 當 PHP 響應出現時，email 表單應該消失並在出現錯誤的情況下重新出現，或者在發送 email 的情況下肯定消失。

有人能幫助我嗎？ 我不明白我在哪里犯了錯誤。 謝謝你。

ps對不起我的英語，有點生疏。

JavaScript：

jQuery(document).ready(function(){  
jQuery("#contactform").submit(function(){  
    jQuery.ajax({  
        type: "POST",
            url: "email.php",  
            data: jQuery("#contactform").serialize(),  
            dataType: "json",  
            success: function(msg){
            jQuery("#load").fadeIn();
            jQuery("#contactform").hide();
            jQuery("#result").removeClass('error');  
            jQuery("#result").addClass('success');  
            jQuery("#result").addClass(msg.status);  
            jQuery("#result").html(msg.message);  
            },  
            error: function(){  
            jQuery("#result").removeClass('success');  
            jQuery("#result").addClass('error');  
            jQuery("#result").html("There was an error submitting the form. Please try again.");  
        }  
        });  
return false;  
});  });    

PHP：

<?php
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');

include ('lang.php');

$name = $_POST['name'];

$email = $_POST['email'];

$comment = $_POST['message'];

    if ((isset($_POST['name']) && !empty($_POST['name'])) && 

    (isset($_POST['email']) && !empty($_POST['email'])) && 

    (isset($_POST['message']) && !empty($_POST['message']))) {

            $email_exp = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i"; 

        if(preg_match($email_exp,$email)) {

        // Send Email

        $to = ' ';

        $subject = ' '; 

        $message = " $comment ";

        $headers = "From: " . $email . "\r\n";

        'Reply-To: noreply@ localhost' . "\r\n" .

        'X-Mailer: PHP/' . phpversion();

        mail($to, $subject, $message, $headers);        

        $lang['status'] = 'success';

        $lang['message'] = $lang['sendmail'];

        $lang['message'];

        } else {

        $lang['status'] = 'error';

        $lang['message'] = $lang['errormail'];

        $lang['message'];

        }

    } else {        

     $lang['error'] = 'error';

     $lang['message'] = $lang['errorform'];

     $lang['message'];  

    }

//send the response back

echo json_encode($lang);

?>

也許是這樣的？

    jQuery.ajax({  
        type: "POST",
            url: "email.php",  
            data: jQuery("#contactform").serialize(),  
            dataType: "json",  
            success: function(msg){
                if (msg == success) {
                    jQuery("#load").fadeIn();
                    jQuery("#contactform").hide();
                    jQuery("#result").removeClass('error');  
                    jQuery("#result").addClass('success');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message);  
                } else {
                    jQuery("#load").fadeIn();
                    jQuery("#contactform").show();
                    jQuery("#result").removeClass('error');  
                    jQuery("#result").addClass('success');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message);
                }
            }
)};

---

你好，謝謝你的回復。 我只是為自己解決了我的問題！

它有效，但我確信我的代碼可能會得到改進。 如果您發現任何錯誤或您有什么建議可以給我，請告訴我。 謝謝！

jQuery(document).ready(function(){  
    jQuery("#contactform").submit(function(){ 
        jQuery(this).fadeOut();
        jQuery("#load").fadeIn();

        jQuery.ajax({  
            type: "POST",
                url: "email.php",  
                data: jQuery("#contactform").serialize(),  
                dataType: "json",
                success: function(msg){
                if (msg.status == 'success') {
                    jQuery("#load").hide();
                        jQuery("#result").removeClass('error');  
                    jQuery("#result").addClass('success');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message); 
                } else {
                        jQuery("#load").hide();
                    jQuery("#contactform").fadeIn();
                        jQuery("#result").removeClass('success');  
                    jQuery("#result").addClass('error');  
                    jQuery("#result").addClass(msg.status);  
                    jQuery("#result").html(msg.message); 
                }   
                },  
                error: function(){  
                jQuery("#result").removeClass('success');  
                jQuery("#result").addClass('error');  
                jQuery("#result").html("There was an error submitting the form. Please try again.");  
            }  
        });  
    return false;  
    });     
});

Answer 1

我想你可以調用 jQuery getJSON() 調用。 這可能有效，但如果您仍在使用jQuery(selector)命名法，您可能必須更新您的 jQuery 版本。

$(document).ready(function(){
  $.getJSON('email.php', $('#contactform').serialize(), function(data){
    // This part completely depends on the format of your returned data.
    // I personally would return error codes.
    // Maybe something like this.
    if(data.status==='error'){
      $('#contactform').hide();
      setTimeout(function(){$('#contactform').show()}, 1000);
    }else if(data.status==='success'){
      $('#contactform').hide();
    }
  });
});