Как скрыть форму электронной почты при получении ответа от JSON

#php #ajax #json #jquery

#php #ajax #json #jquery

Вопрос:

Я пытаюсь создать форму электронной почты с проверкой полей, но у меня возникли проблемы с моим скриптом jQuery. Скрипт получает ответ на сообщение от PHP-скрипта, который я использую json_encode() . При появлении ответа 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']) amp;amp; !empty($_POST['name'])) amp;amp; 

    (isset($_POST['email']) amp;amp; !empty($_POST['email'])) amp;amp; 

    (isset($_POST['message']) amp;amp; !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 . "rn";

        'Reply-To: noreply@ localhost' . "rn" .

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

Комментарии:

1. У вас возникли какие-либо проблемы?

Ответ №1:

Я бы предположил, что вы могли бы вызвать вызов jQuery getJSON (). Это может сработать, хотя вам, вероятно, придется обновить вашу версию jQuery, если вы все еще используете jQuery(selector) номенклатуру.

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