Receive PHP parameters with jQuery ajax post

Question

I am sending data via jQuery's .ajax method to my PHP file. Both files are on the same domain. The file making the post looks like this..

$('#pdf').click(function() {                    
    var proj_name = $('#proj_name').text();
    var date = $('#date').text();
    var req_comp_date = $('#req_comp_date').text();
    var status = $('#status').text();
    var secondUserID = $('#secondUserID').text();

    var postData = {
        "proj_name" : proj_name,
        "date" : date,
        "req_comp_date" : req_comp_date,
        "status" : status,
        "secondUserID" : secondUserID,
    };

    console.log(postData);

    $.ajax({
        type: "POST",
        url: "test.php",
        data: postData, 
        success: function(){
            alert(proj_name + ' ' + status);
            window.open("test.php"); 
        }
    });
});

And the PHP file getting the post data is...

//request parameters
$proj_name = $_POST['proj_name'];
$date = $_POST['date'];
$req_comp_date = $_POST['req_comp_date'];
$status = $_POST['status'];
$secondUserId = $_POST['secondUserId'];

echo 'postData: ' . var_dump($_POST);

if ($_POST)){
    echo $proj_name;
    echo $date;
    echo $req_comp_date;
    echo $status;
    echo $secondUserId;
} else {
    echo 'problem';
}

In my firebug console, I can see that the parameters posted with .ajax, but I cannot get the post via PHP. Can anyone help me out please? Thank you.

Solution

Add the error callback to your to your $.ajax call to debug if the request is failing.

$.ajax({
    type: "POST",
    url: "test.php",
    data: postData, 
    success: function(){
        alert(proj_name + ' ' + status);
        window.open("test.php"); 
    },
    // Alert status code and error if fail
    error: function (xhr, ajaxOptions, thrownError){
        alert(xhr.status);
        alert(thrownError);
    }
});

---

Change this:

if ($_POST)){
    echo $proj_name;
    echo $date;
    echo $req_comp_date;
    echo $status;
    echo $secondUserId;
} else {
    echo 'problem';
}

To this:

if ($_POST)){
    // Make a array with the values
    $vals = array(
        'proj_name'     => $proj_name,
        'date'          => $date,
        'req_comp_date' => $req_comp_date,
        'status'        => $status,      
        'secondUserId'  => $secondUserid
    );

    // Now we want to JSON encode these values to send them to $.ajax success.
    echo json_encode($vals);

    exit; // to make sure you arn't getting nothing else

} else {
    // so you can access the error message in jQuery
    echo json_encode(array('errror' => TRUE, 'message' => 'a problem occured'));
    exit;
}

Now in your jQuery .success callback:

success: function(data){ // Our returned data from PHP is stored in "data" as a JSON Object
    alert(data.req_comp_date); // access your returned vars like this.
    // data.date; // is your posted date.. etc
    alert(data.proj_name + ' ' + data.status);
    window.open("test.php"); 

    // You can also get your error message like so..
    if(data.error) // if its true, we have a error, so display it.
         alert('ERROR: ' + data.message); 

},

You dont really have to do this next bit (jquery does a good job of determining the data type returned), but its nice to have it in the code to understand what is being returned.

$.ajax({ ...
    type: "POST",
    url: "test.php",
    data: postData, 
    dataType: "json" // <-- Add this to tell jquery, we are being returned a JSON object.
.... });