AJAX: How to display data on another page

I have the following function below. When a button is clicked, the function below is executed. The function basically sends json data to the page "temp.php", via Ajax

I think the sending of data is successfull. My main problem is printing/displaying the data sent by ajax to the "temp.php" page.

    **Orders.php:**

    function convertToJson()
    {
        var tableData = $('#productOrder').tableToJSON({
            ignoreColumns: [0]
        }); 
        var result = JSON.stringify(tableData)
        $.ajax({
            url: "http://localhost/app/temp.php",
            data: {result},

            type: "POST",
        })
          .done(function( json ) {
                document.getElementById('testDiv').innerHTML = result;
          })

          .fail(function( xhr, status, errorThrown ) {
            alert( "Sorry, there was a problem!" );
            alert( "Error: " + errorThrown );
            alert( "Status: " + status );
            alert( xhr );
          })

          .always(function( xhr, status ) {
            alert( "The request is complete!", status );
          });           
    }

**temp.php**
  <?php
   $Id = json_decode($_POST['Id']);
   $Name = json_decode($_POST['Product Name']);
   $Unit = json_decode($_POST['Unit']);

   echo "<h1>$Id</h1>";
 ?>