Question

我正在构建一个表单来提交电子邮件。当我添加ajax动画时，数据无法传递给php。不知道为什么。请帮助，非常感谢。

这是js

    //contact form
var form = $('.contact-form');
form.submit(function () {
    $this = $(this);
    $.post($(this).attr('action'), function(data) {
        $this.prev().text(data.message).fadeIn().delay(3000).fadeOut();
    },'json');
    return false;
});

这是php

<?php
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.'>');

echo json_encode($status);
die;

＆GT;

这是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" class="btn btn-primary btn-lg">Send Message</button>
</form>

Answer 1

我建议使用“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'）”是正确的。

Answer 2

首先要做的事情....你没有将任何数据发布到处理AJAX的PHP文件中......你可能想尝试这些方法：

JAVASCRIPT：更新警告某些信息......

    <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>

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

2 个答案: