Why is my ajax post function not working with button click?

Question

I am trying to post variables to my PHP file when a button is clicked using AJAX, but when I check my PHP page loads, I am not receiving the variables.

$(document).ready(function(){
    $("#qryBtn").click(function(){
        // post qry //
        var qry = query();
        $.ajax({
            type: "POST",
            url: "favourites.php",
            data: {
                qry: qry
            },
            success: function (html) {
                console.log (qry);
            }
        });
    });
});

Where query() is just a function that creates an array.

error_reporting ( E_ALL );
ini_set ( 'display_errors', 1 );
$query = "";
$key = "";
function getQueries() {
    if (isset ( $_POST ['qry'] )) {
        $query = $_POST ['qry'];
        echo $query;
    } else {
        echo "Query Missing";
    }
}
getQueries ();
function saveQueries() {
    if (isset ( $_POST ['keyValue'] )) {
        $key = $_POST ['keyValue'];
        $arr = array_combine ( $key, $query );
    } else {
        echo "Key Missing";
    }
}
saveQueries ();

Output :

Query MissingKey Missing

I have used similar procedure to post data to PHP pages but not using a button click, is there a something I'm missing?

Answer 1

May be it is because you are not declaring content type.

Change your script as follows.

$(document).ready(function(){
    $("#qryBtn").click(function(){
        // post qry //
        var qry = query();
        $.ajax({
            type: "POST",
            url: "favourites.php",
            data: {
                qry: qry
            },
            contentType: 'application/json',
            success: function (html) {
                console.log (qry);
            }
        });
    });
});

Default jquery ajax content type is application/x-www-form-urlencoded; charset=UTF-8 while your are posting your data in json format so that you have to explicitly tell ajax that your are sending json content by declaring content type as application/json

EDIT

Then send data as string content. Try following script. (please note I have removed contentType option.

$(document).ready(function(){
        $("#qryBtn").click(function(){
            // post qry //
            var _data= JSON.stringify({qry:query()}); 
            $.ajax({
                type: "POST",
                url: "favourites.php",
                data: _data,
                success: function (html) {
                    console.log (qry);
                }
            });
        });
    });

Answer 2

$(document).ready(function(){
    $("#qryBtn").click(function(){
        // post qry //
        var qry = query();
        qry = JSON.stringify(qry); // added this line
        $.ajax({
            type: "POST",
            url: "favourites.php",
            data: {
                qry: qry
            },
            success: function (html) {
                console.log (qry);
            }
        });
    });
});