将存储在HTML会话存储中的数据显示到页面中

Question

I am trying to create a checkout page to send a confirmation to the customer of the products they want to buy. However, I am having trouble to display the data stored in the session storage into my checkout page. Whenever I click on the checkout button, the page only displays the title, and it doesn't display the data. Can somebody help me figure out this problem. I would really appreciate it.

HTML

<div id="show_checkout">
    <h1 id="basket_header">- My Basket -</h1>
    <!-- The items the user wants to buy, will be displayed on this table -->
    <table id="basket_list"></table>
    <!-- Displays the checkout and empty buttons -->
    <div id="basketDiv"></div>
</div>

JavaScript

window.onload = loadBasket;

//Displays basket in page.
function loadBasket() {
    //Get basket from local storage or create one if it does not exist
    var basketArray;
    if (sessionStorage.basket === undefined || sessionStorage.basket === "") {
        basketArray = [];
    } else {
        basketArray = JSON.parse(sessionStorage.basket);
    }
    var tableBody;
    var tableHeader = "<tr><th>Product Image</th><th>Product Name</th><th>Price</th></tr>
";
    //Build string with basket HTML
    var htmlStr = "<p class='basket_items'>Number of items in basket: " + "<span style='color:red'>" + basketArray.length + "</span>" + "</p>";
    var prodIDs = [];

    for (var i = 0; i < basketArray.length; ++i) {
        tableBody += "<tr><td>" + "<img class='basket_img' src='" + basketArray[i].image + "'>" + "</td><td>" + basketArray[i].name + "</td><td>£" + basketArray[i].price + "</td></tr>";
        prodIDs.push({
            id: basketArray[i].id,
            count: 1
        }); //Add to product array
    }
    //Add hidden field to form that contains stringified version of product ids.
    htmlStr += "<input type='hidden' name='prodIDs' value='" + JSON.stringify(prodIDs) + "'>";

    //Add checkout and empty basket buttons
    htmlStr += "<input class='checkout_button' onclick='checkoutBasket()' type='submit' value='Checkout'>";
    htmlStr += "<button class='empty_basket' onclick='emptyBasket()'>Empty Basket</button>";

    //Display number of products in basket
    document.getElementById("basketDiv").innerHTML = htmlStr;

    document.getElementById("basket_list").innerHTML = tableHeader + tableBody;
}

//Deletes all products from basket
function emptyBasket() {
    sessionStorage.clear();
    loadBasket();
}

function checkoutBasket() {
    // Create request object 
    var request = new XMLHttpRequest();
    // Create event handler that specifies what should happen when server responds
    request.onload = function() {
        // Check HTTP status code
        if (request.status == 200) {
            var responseData = request.responseText;
            document.getElementById("show_checkout").innerHTML = responseData;
    } else
        alert("Error communicating with server: " + request.status);
  }
  // Set up request with HTTP method and URL 
  request.open("POST", "php/checkout.php");
  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  //Send request
  request.send();
}

PHP

<?php
//Extract the product IDs that were sent to the server
$prodIDs = filter_input(INPUT_POST, 'prodIDs', FILTER_SANITIZE_STRING);

//Convert JSON string to PHP array 
$productArray = json_decode($prodIDs, true);

//Output the IDs of the products that the customer has ordered
echo '<h1 id="basket_header">- My Order -</h1>';
for($i=0; $i<count($productArray); $i++) {
    echo '<p>Product ID: ' . $productArray[$i]['id'] . '. Count: ' . 
$productArray[$i]['count'] . '</p>';
}
?>