在PHP中從Ajax / Jquery獲取表格$ _POST數據

Question

與往常一樣，如果您能為您提供幫助，請先感謝。

我正在嘗試使用Ajax調用腳本並同時發布表單數據。 一切正常，但$ POST數據除外，當我嘗試回顯或打印該數據時，該數據變為空白。 有人可以照亮我在這里錯過的東西嗎？

<form id="guestlist" name="guestlist">
<?php // Collect CLUBS data to pass to guestlist script ?> 
<input type="hidden" name="gl_clubname"   value="<?php echo $ptitle; ?>" />
<input type="hidden" name="gl_clubnumber" value="<?php echo $phoneno_meta_value; ?>" />
<input type="hidden" name="gl_clubemail"  value="<?php echo $email_meta_value; ?>" />
<?php // Collect USERS data to pass to guestlist script ?> 
<input type="hidden" name="gl_name"  value="<?php echo $fullname;?>" />
<input type="hidden" name="gl_email"  value="<?php echo $email;?>" />
<input type="hidden" name="gl_dob"  value="<?php echo $birthday;?>" />
<input type="hidden" name="gl_propic"  value="<?php echo $profile_url;?>" />

<div id="clubcontactleft">
<textarea id="clubmessage" name="gl_message" placeholder="Your message" rows="4" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/userreview.jpg');
 background-repeat:no-repeat; padding-left:40px; background-size:40px 94px; width:250px; margin-bottom:15px;"></textarea>
 <input type="text" name="gl_when" placeholder="Enquiry Date" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/calendaricon.jpg');
 background-repeat:no-repeat; padding-left:40px; background-size:40px 38px; width:250px;">
<input type="text" name="gl_phonenumber" placeholder="Phone Number" style="background-image:url('http://www.xxxxx.com/wp-content/themes/xxxxx/images/phonecall.jpg');
 background-repeat:no-repeat; padding-left:40px; background-size:40px 38px; width:250px;">
</div>
<div class="guestlistbutton"><a href="#" alt="Send Message" title="Send Message" class="calltoactionbutton">Send Message</a></div>
</form>


<script type="text/javascript">
    $(document).ready(function($){
        $(".guestlistbutton").on('click',function(event) {
            event.preventDefault();
            $("#clubcontactform").empty();
            var url = "http://www.xxxxxx.com/wp-content/themes/xxxxxx/guestlist.php"; // the script where you handle the form input.
            $.ajax({
                type: "POST",
                url: url,
                data: $("#guestlist").serialize(), // serializes the form's elements.
                success: function(data)
                {
                    $('#clubcontactform').append(data); // show response from the php script.
                }
            });
            return false; // avoid to execute the actual submit of the form.
        });
    });
</script>

這是它拉入的PHP文件

<?php
echo 'Pulling in guestlist.php<br/>';
$gl_message = $_POST['gl_message'];
print_r($gl_message);
echo $gl_message;

?>

謝謝！

Answer 1

每件事似乎都是正確的，只有您忘記包含jquery文件。 請包括並嘗試一次。 如果仍然存在，該問題將創建Jsfiddle

Answer 2

我在本地計算機上檢查了您的代碼，並收到以下錯誤“顯示警告臨時標題”。 如果您在瀏覽器控制台中有相同的消息，則此信息可以為您提供幫助： Chrome調試器中的“警告：顯示了臨時標題”

另外，我看到js可以正常工作。 您的網址中有問題。 嘗試將表單發送給自己，只需在一個文件中編寫html部分和php部分代碼即可。

Answer 3

<div>
<form id="Get_FRm_Data">
/*
Some field using.....
/*
</form>
<button type="button" name="submit" class="submit_act">Submit</button>
</div>
<script>
var file_pathname = window.location.protocol + "//" + location.host + "/foldername/";
$(document).on("click", ".submit_act", function ()
{
    var $this_val=$(this);
    $this_val.html("Loading...").prop("disabled",true);
    var $data_ref = new FormData($("#Get_FRm_Data")[0]);
    $data_ref.append("action", "fileaction_name");
    $pathname = file_pathname + "filename.php";
    $.ajax({
        url: $pathname,
        type: 'POST',
        data: $data_ref,
        cache: false,
        contentType: false,
        processData: false,
        dataType: 'json',
        success: function (result, status)
        {
            console.log(result);
            if (status == "success")
            {
             $this_val.html("Submit").prop("disabled",false);
            }
        }

    });

});
</script>
<?php
if (isset($_POST['action']))
        {
        $action = $_POST['action'];
         if($action=="fileaction_name")
        {
            print_r($_POST);
        }
    }
?>