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

我在本地计算机上检查了您的代码，我收到了以下错误＆＃34;小心显示临时标题＆＃34;。如果您在浏览器控制台中显示相同的消息，则此信息可以帮助您："CAUTION: provisional headers are shown" in Chrome debugger

另外，我看到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);
        }
    }
?>

从php中的Ajax / Jquery获取表单$ _POST数据

3 个答案: