0

I'm using PHP 7.3 with MySQL v5.6.

Browsing a catalog page, I stored some items ids to localStorage.wishlistStorage.data, and now on the wishlist page I want to retrieve this list of ids for display. I'm using PHP because later I will be sending and retrieving items from a database. Also, it's easy to build HTML on the fly using PHP and a POST array. Unfortunately, I'm struggling with the AJAX XMLHttpRequest.

I am loading a Javascript file at the bottom of the page that retrieves the localStorage data:

var wishlistStorage = {};

window.addEventListener("load", function() {
  wishlistStorage.get();
  loadWishlist();
});

wishlistStorage = {
  data : null, // empty storage
  get : function() {
    wishlistStorage.data = localStorage.getItem("wishlistStorage");
    if(wishlistStorage.data === null) { 
      wishlistStorage.data = { items: [], item_notes: [], comments: '' };
      wishlistStorage.save();
    }
    else { 
      wishlistStorage.data = JSON.parse(wishlistStorage.data); 
    }
  }
};

// get wishlist contents
function loadWishlist() {
  var items = wishlistStorage.data.items.join("%20");
  var wishlistRequest;
  if(window.XMLHttpRequest) {
    wishlistRequest = new XMLHttpRequest();
  } else {
    wishlistRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }
  wishlistRequest.onreadystatechange = function() {
    if(wishlistRequest.readyState == 4 && wishlistRequest.status == 200) {
      console.log("Got them.");
    } else {
      console.log("I see nothing.");
    }
    wishlistRequest.open("POST", "_self", true);
    wishlistRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    wishlistRequest.send("wishlist_items=" + encodeURIComponent(items));
  }
}

In the body of wishlist.php

<?php
  if (array_key_exists('wishlist', $_POST)) {
    $temporary_wishlist = $_POST['wishlist'];
    echo "Yes, it works! $temporary_wishlist";
  } else {
    echo 'Invalid parameters!';
  }
?>

All I get is the "Invalid Parameters" message. None of the console.log messages appear. Where am I going wrong?

source

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
chillywilly
  • 405
  • 3
  • 11
  • 4
    Move `wishlistRequest.open()` and friends out of the `onreadystatechange` handler. Also, it's 2020. Check out the [Fetch API](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) or [Axios](https://github.com/axios/axios) – Phil Mar 31 '20 at 06:45
  • 1
    The second argument to `open()` should be a URL, not `_self`. – Barmar Mar 31 '20 at 06:46
  • Thank you, Phil. That was a silly error! Barmar — Is "_self" not allowed? I thought I read that it was, but now I can't find that reference. – chillywilly Mar 31 '20 at 06:59
  • rather than `_self` use `location.href` for the same page. It is fine using `_self` as a form target for instance though ( but that is rarely used ) – Professor Abronsius Mar 31 '20 at 07:10
  • I think I'm not understanding the flow of information in the XMLHttpRequest. I've read the docs, and it is still unclear. I want to display the information directly on the page that calls it, which is why I was using `_self`. I thought it would just give my page access to the POST variable, but this doesn't seem to work. – chillywilly Mar 31 '20 at 07:23
  • I went ahead and created another php file and just added a single line of `echo "{$_POST['wishlist_items']}";` and now I can see the responseText in the console. If there was a way to send that post variable to the page that is calling the script that would be my preference. When I put the URL of the original page in the open() function, I get the entire HTML page in the responseText, and that doesn't make a lot of sense to me. – chillywilly Mar 31 '20 at 07:23

0 Answers0