AJAX post to PHP empty

Question

I have checked the other questions - this is not a duplicate. I have tried all of the solutions I could find and implement.

I am trying to send data from task.php → showCats.php

task.php:

<script type="text/javascript">

    $(document).on("click", ".btnCat", function () {
        var filter = $(this).data("id");

        alert(filter);
        $.ajax({
            type: 'POST',
            url: 'showCats.php',
            data: {'filter': filter},
        });
        $('div.container-fluid').load('showCats.php');
    });

</script>

showCats.php:

$area = $_POST['filter'];

$sql = "select AID,name,surname,street_name,house_number, area, plz,poster,visible from addresses WHERE area LIKE '$area' AND visible LIKE 'show' ORDER BY AID DESC";
$rs = mysqli_query($con,$sql);
$str = '';

while ($res = mysqli_fetch_array($rs)) {
    $str .= '
    <div class="col-md-9">
        <div class="task col-md-12 well" id='.$res['AID'].'>
            <div>
                <button class="btn btn-danger btn-xs btnDelete" id='.$res["poster"].' onclick="refresh()" data-id="'.$res['AID'].'">x</button>
            </div>
            <div>
                <span>'. $res["name"].'</span>
                <span>'. $res["surname"].'</span><br>
                <span>'. $res["street_name"].'</span>
                <span>'. $res["house_number"].'</span><br>
                <span>'. $res["plz"].'</span>
                <span>'. $res["area"].'</span>
            </div>
        </div>
    </div>';
}

echo $str;
?>

var_dump($_POST); returns NULL , even though I can see the post value under Developer Tools in Chrome.

My GET:

Request URL:https://example.com/showCats.php
Request Method:GET
Status Code:200 OK
Remote Address:xxx:443
Response Headers
view source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 15 Jul 2016 18:43:56 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx/1.6.2
Strict-Transport-Security:max-age=31536000
Transfer-Encoding:chunked
Request Headers
view source
Accept:text/html, */*; q=0.01
Accept-Encoding:gzip, deflate, sdch, br
Accept-Language:en-US,en;q=0.8,de;q=0.6
Connection:keep-alive
Cookie:PHPSESSID=vudgbb33574tfod2vu48hst830
Host:example.com
Referer:https://example.com/tasks.php
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
X-Requested-With:XMLHttpRequest

My POST:

Request URL:https://example.com/showCats.php
Request Method:POST
Status Code:200 OK
Remote Address:xxx:443
Response Headers
view source
Cache-Control:no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection:keep-alive
Content-Encoding:gzip
Content-Type:text/html; charset=UTF-8
Date:Fri, 15 Jul 2016 18:43:56 GMT
Expires:Thu, 19 Nov 1981 08:52:00 GMT
Pragma:no-cache
Server:nginx/1.6.2
Strict-Transport-Security:max-age=31536000
Transfer-Encoding:chunked
Request Headers
view source
Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.8,de;q=0.6
Connection:keep-alive
Content-Length:12
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Cookie:PHPSESSID=vudgbb33574tfod2vu48hst830
Host:example.com
Origin:https://example.com
Referer:https://example.com/tasks.php
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Data
view source
view URL encoded
filter:Turgi

Answer 1

You are trying to send data from task.php -> showCats.php ! your code does that very well by using this:

$.ajax({
    type: 'POST',
    url: 'showCats.php',
    data: {'filter': filter},
});

The problem is when you do this : $('div.container-fluid').load('showCats.php'); a GET request will be sent to the server! so It's normal to find that var_dump($_POST) return NULL.

If you want to show/get the response you can use the success event like this:

$.ajax({
    type: 'POST',
    url: 'showCats.php',
    data: {'filter': filter},
    //A function to be called if the request succeeds.
    success: function(data) {
       $('div.container-fluid').html(data)
   },
   //A function to be called if the request fails
   error: function(xhr, status, error) {
       alert('An error occurred:'+error);
   }
});

Answer 2

setting a datatype parameter tells what kind of data you are sending.

type: "POST",
dataType: 'json',

I would concur with those comments above. Loading the program a second time does not report the values of the database call. Further, wouldn't AJAX normally return values to the calling program with an echo of json_encode, instead of just echoing the variable to a run of the PHP page that does not get viewed?