Question

我正在尝试使用字段验证创建一个电子邮件表单，但我的jQuery脚本出现问题。该脚本从我使用json_encode()的PHP脚本获取消息响应。当出现PHP响应时，电子邮件表单应该消失，并在发生错误的情况下重新出现，或者在发送电子邮件的情况下肯定会消失。

是的，有人能帮帮我吗？我不明白我犯了什么错误。谢谢。

P.S。对不起我的英文，它有点生疏。

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

如何在收到JSON响应时隐藏电子邮件表单

1 个答案: