Wordpress ajax call is returning an entire page of html

Question

I have the following piece of javascript which runs in my wordpress site :

var PostData = "Action=refresh-cart";
                     jQuery.ajax({
                       dataType: "text",
                       type: 'POST',
                       url : location.href,
                       cache: false,
                       data : PostData,
                       complete : function() {  },
                       success: function(data) {
                         //   jQuery("#loading-img").hide();

                           // jQuery("#join-class-div-3").html(data);

                        }           
                });

The php is :

<?php 

  if(isset($_POST['Action'])) {
        $Action = $_POST['Action'];
        if($Action == "refresh-cart") {


           echo '<div id="stuff"><p> done LOL </p></div>'; 
            }
        }

    ?>

So I expect to be sent back :

<div id="stuff"><p> done LOL </p></div>

But instead I receive an entire page of html!? Why!?

Answer 1

It will return all contents from the page rendered at your url "location.href"

Try adding a exit() to your php code to stop it after your echo.

<?php 
if(isset($_POST['Action'])) {
    $Action = $_POST['Action'];
    if($Action == "refresh-cart") {
         echo '<div id="stuff"><p> done LOL </p></div>';
         exit;
    }
}
?>
<div>html content here will not be displayed</div>

Answer 2

The problem was occuring because location.href was a high level URL, so wordpress was injecting loads of html around the ajax request.

Through altering location.url to a call to plugins.url() which is part of the wordpress PHP API - the AJAX call goes directly to my PHP page and I get the correct response :)