var_dump($_POST) returning array(0){} for stringified JSON passed with jQuery AJAX

Question

Hi I can't seem to be getting this post to work. First, I used Typescript to create a class:

class ParticipantInfo {

constructor (public fname: string,
             public mname: string,
             public lname: string,
             public ssn: string,
             public sin: string,
             public tin: string,
             public addr1: string,
             public addr2: string,
             public addr3: string,
             public city: string,
             public state: string,
             public zip: string,
             public email: string,
             public phone: string,
             public local: string){}
}

Which created this javascript:

var ParticipantInfo = (function () {
    function ParticipantInfo(fname, mname, lname, ssn, sin, tin, addr1, addr2, addr3, city, state, zip, email, phone, local) {
    this.fname = fname;
    this.mname = mname;
    this.lname = lname;
    this.ssn = ssn;
    this.sin = sin;
    this.tin = tin;
    this.addr1 = addr1;
    this.addr2 = addr2;
    this.addr3 = addr3;
    this.city = city;
    this.state = state;
    this.zip = zip;
    this.email = email;
    this.phone = phone;
    this.local = local;
    }
    return ParticipantInfo;
}());

I used jQuery to handle the submit event on an HTML button I attached to a form element:

$(document).ready(function(){
    $("#frmInquiryForm").submit(function(event){

        event.preventDefault();

        var formData = new ParticipantInfo($('[name="f1_fname"]').val(),
                                           $('[name="f1_mname"]').val(),
                                           $('[name="f1_lname"]').val(),
                                           $('[name="f1_ssn"]').val(),
                                           $('[name="f1_sin"]').val(),
                                           $('[name="f1_tin"]').val(),
                                           $('[name="f1_addr1"]').val(),
                                           $('[name="f1_addr2"]').val(),
                                           $('[name="f1_addr3"]').val(),
                                           $('[name="f1_city"]').val(),
                                           $('[name="f1_state"]').val(),
                                           $('[name="f1_zip"]').val(),
                                           $('[name="f1_email"]').val(),
                                           $('[name="f1_phone"]').val(),
                                           $('[name="f1_local"]').val());
$.ajax({
            type: "POST",
            url:"processForm.php",
            data: JSON.stringify(formData),
            success: function(data){
                alert(data);
                window.location = 'confirmForm.php?message='+data;
            },
            error: function(xhr, ajaxOptions, thrownError){
                alert('status='+ajaxOptions);
                alert("XHR STATUS="+xhr.status+" "+ thrownError);

            }

        });

    })
})

Just for testing, all I am doing on the processForm.php page is this:

<?php
    var_dump($_POST);
?>

The alert message from the successful AJAX call only returns "array(0){}". Is the problem with JSON.stringify or is there something else anyone knows about? Thanks in advance for all your help!

Answer 1

Remove the JSON.stringify before sending your data.

You're not specifying the contentType in the $.ajax call, document says the default is application/x-www-form-urlencoded. jquery encodes your data to foo=bar&this=that if you pass an object to it, but here you're passing an encoded json string, thus causing unexpected behavior, which to me, is probably that php receives something like "{"foo":"bar"}", while php only auto parses urlencoded request body(because json formatted body is relative new in the standard).

So if you want to use the application/json content-type, make sure you specify it in $.ajax's options, and parse it in php like $requestArray = json_decode(file_get_contents('php://input'));. Read more in another question here.