Sending JS object with AJAX not updating PHP script

Question

I have built multiple forms that collect data from a user and compile it into a JS object, which i JSON.stringify() and pass through the following AJAX code as "post_data":

$(document).ready(function() {
  $('#php_post_show').click(function() {
    console.log(post_data);
    $.ajax({
      type: "POST",
      url: "http://localhost:80/php_beginner/index.php",
      data: {
        'post_data': post_data
      },
      success: function(data, textStatus, jqXHR) {
        console.log(data); //if it returns any data
        console.log(textStatus); //or alert(textStatus);
      },

      error: function(jqXHR, textStatus, errorThrown) {
        console.log("There is some error");
        console.log(errorThrown);
      }
    })
  })
});

I have the following PHP:

<div id="if_sent">

<?php
if (isset($_POST['post_data'])) {

  //Retrieve the string, which was sent via the POST parameter "user"
  $post_data = $_POST['post_data'];

  //Decode the JSON string and convert it into a PHP associative array.
  echo $post_data;

  //var_dump the array so that we can view it's structure.
  var_dump($_POST);
}

var_dump($_POST);

echo "this works"
?>

</div>

When executed I get a 'success' in the console, as well as log of the correct PHP code I want to display returned in the console. The problem is my browser displaying the PHP does not update.

What is going on here? Why does my success message type out exactly what should be displayed but the page does not display the proper PHP.

The echo "this works" works, and var_dump($_POST) returns an empty array. WHY?

For context I am using XAMPP if that has anything to do with it.