Messing about with JQuery

I am currently working on a QR code maker project and have been determined to steer clear of complicated systems of hiding and revealing elements using JavaScript, instead aiming for a proper go at AJAX methods.

After a bit of tinkering and reading about JQuery's AJAX capabilities I finally came up with this working code for the processing of posted data using AJAX.

JQuery's AJAX code in index.php
//Wait till HTML has fully loaded
$(document).ready(function(){
// Attach a submit handler to the form
$( "#theForm" ).submit(function( event ) {

      // Stop form from submitting normally
      event.preventDefault();

      // Get some values from elements on the page:
      var url = $(this).attr("action");
      var fData = $(this).serialize();

      // Send the data using post
      var posting = $.post(url, fData, function(response) { 

          // Put the results in a div
        $( "#result" ).empty().append( response );

      });//End $.post

    });    //End form submit event.

})//End Ready
Form elements and space for server response in the same file
<form  method="POST" id="theForm" action="target.php">
<input type="text" name="person" placeholder="Who are you?">
<input type="submit" value="Submit">
Elsewhere on the server, target.php
<?php echo "Hello ". $_POST["person"]; ?>
The result

Boris the spider appearing via JQuery