json-ajax动画防止通过php发送数据

首先。。。。您没有将任何数据发布到处理AJAX的PHP文件。。。你可能想尝试一些类似的东西：

Java脚本：已更新以提醒一些消息

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        (function ($) {
            $(document).ready(function(e) {
                //contact form
                var form    = $('.contact-form');
                form.submit(function (evt) {
                    var $this    = $(this);
                    // PREVENT THE FORM FROM FOLLOWING THE NORMAL COURSE
                    evt.preventDefault();

                    // BUILD UP YOUR AJAX LAYER...
                    $.ajax({
                        url: form.attr("action"),
                        dataType: "json",
                        cache: false,
                        type: "POST",
                        data: ({                                        // ADD DATA TO THAT WOULD BE POSTED VIA AJAX...
                            firstname   : $("#firstname").val(),        //<== ADD THE FIRST NAME TO THE DATA TO BE POSTED AS IT IS NEEDED IN YOUR PHP
                            lastname    : $("#lastname").val(),         //<== ADD THE LAST NAME TO THE DATA TO BE POSTED AS IT IS NEEDED IN YOUR PHP
                            email2      : $("#email2").val(),           //<== ADD THE EMAIL TO THE DATA TO BE POSTED AS IT IS NEEDED IN YOUR PHP
                            message     : $("#message").val()           //<== ADD THE MESSAGE TO THE DATA TO BE POSTED AS IT IS NEEDED IN YOUR PHP
                        }),
                        success: function (data, textStatus, jqXHR) {
                            console.log(data);
                            if(data){
                                // THIS IS NEW...
                                var msg = "TYPE: " + data.type + "'nMESSAGE:" + data.message;
                                // PERFORM YOUR ANIMATION...
                                $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
                                // THIS TOO...
                                alert(msg);
                            }
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            // THIS IS NEW...
                            var err = 'The following error occured: ' + textStatus, errorThrown;
                            console.log(err);
                            // THIS ALERT TOO...
                            alert(err);
                        },
                        complete: function (jqXHR, textStatus) {
                        }
                    });

                });
        });
    })(jQuery);
    </script>

PHP

    <?php
        // IF THIS DOESN'T WORK, TRY REMOVING THE HEADER PART TEMPORARILY 
        // TO SEE HOW THINGS PLAY OUT, THOUGH IT SHOULD NOT BE A CAUSE FOR
        //  ALARM... (ACTUALLY THE OPPOSITE).
        header('Content-type: application/json');
        $status = array(
            'type'      =>'success',
            'message'   =>'Thank you for contacting us, we will get you back soon!'
        );
        $firstname  = @trim(stripslashes($_POST['firstname']));
        $email      = @trim(stripslashes($_POST['email2']));
        $lastname   = @trim(stripslashes($_POST['lastname']));
        $message    = @trim(stripslashes($_POST['message']));
        $email_from = $email;
        $email_to   = 'linchenyu1988@gmail.com';
        $body       = 'First Name: ' . $firstname . "'n'n" . 'Last Name: ' . $lastname . "'n'n" . 'Email: ' . $email . "'n'n" . 'Message: ' . $message;
        $success    = @mail($email_to, 'Mortise Message' , $body, 'From: <'.$email_from.'>');
        die( json_encode($status) );
    ?>

HTML

    <form id="main-contact-form" class="contact-form" name="contact-form" method="post" action="sendemail.php" role="form">
        <input name="firstname"     id="firstname"      type="text" placeholder="First Name">
        <input name="lastname"      id="lastname"       type="text" placeholder="Last Name">
        <input name="email2"        id="email2"         type="text" placeholder="Email address">
        <textarea name="message"    id="message"        rows="8"    placeholder="Message"></textarea>
        <button type="submit"       id="submit-btn"     class="btn btn-primary btn-lg">Send Message</button>
    </form>

我建议使用"ajax"而不是"post"

  $.ajax({  
      type: 'POST',  
      url: 'http://www.yoururl.com',  
      data: {key:'data'},
      success: function(data){
          alert(data);
      }
  });

并确保将正确的参数传递给php。

根据这个例子：

$.post( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

第一个post参数是url，所以请确保"$（this）.attr（'action'）"是正确的。