无法从jQuery Ajax请求访问数据，返回空数组

Question

I have a form that is called via the fancybox plugin login example.

Here is the code I have:

Form:

<form method="post" action="" id="events_form">
    <p class="clearfix"><label for="Name">Name:</label> <input type="text" name="Name" id="Name" /></p>
    <p class="clearfix"><label for="Company">Company:</label> <input type="text" name="Company" id="Company" /></p>
    <p class="clearfix"><label for="Email">Email:</label> <input type="text" name="Email" id="Email" /></p>
    <p class="clearfix"><label for="Tel">Tel:</label> <input type="text" name="Tel" id="Tel"/></p>
    <p class="clearfix"><input type="submit" value="Submit details" /></p>
 </form>

JavaScript / jQuery:

<script type="text/javascript">
    $(document).ready(function(){
        $("#event_trigger").fancybox({
            'padding'  : 0,
            'scrolling'  : 'no',
            'titleShow'  : false,
        });

        $("#events_form").bind("submit", function() {
            $.fancybox.showActivity();

            $.ajax({
                type  : "POST",
                cache : false,
                url  : "/events/index.php",
                data  : $(this).serializeArray(),
                success: function(data) {
                    $.fancybox(data);
                }
            });
            return false;
        });
    });
</script>

The PHP file returns and empty array. However the Firebug post tab displays the form data.

Also, I noticed that if I do

print_r($_SERVER['REQUEST_METHOD'])

This returns GET, even though I have specified POST.

Answer 1

$(this).serializeArray()

with the name of the form CSS id (#my-form-ID, in this example) like this:

$("#my-form-ID").serializeArray()

Hope that solves it. It worked for me. ;-D

Answer 2

$.ajax expects the parameter data to be an object or a string.

http://api.jquery.com/jQuery.ajax/ scroll down to data.

If you wrap your data in an object eg data: {array:$(this).serializeArray()} it may work. I'm not 100% sure on that though.

Answer 3

You are doing an AJAX request on a form submit.

Unless the AJAX request is synchronous (which I wouldn't recommend, anyway) there is a danger that your form will be submitted before there is any chance for the AJAX request will return.

In the line:

$(this).serializeArray()

$(this) is referring to the the form element you have selected in the bind method. I'm assuming this is intended