Ajax - after "success" go to another page retrieve user id from the url there

Question

var JSONonj = {"name": "James","age":"25"};
var data = "This data i would like to retrieve and print in the main.html page after success call in ajax.";

$.ajax({
        url: "/user",
        type: "POST",
        data: JSONobj,
        dataType: "json",
        success: function() {
            window.location.href = "main.html";
        },
        contentType: "application/json"
});

Here is the deal. After success i want to redirect to main.html and when I get there, I would like to retrieve and print data variable there.

The redirection works fine. But I can not receive the data there.

Solution 1

There are two main ways to achieve that :

1. somehow send the data to the server (see the other answers for possible ways to do that)

2. use the browser's localStorage :

   success: function() {
       localStorage.setItem('myMainKey', data);
       window.location.href = "main.html";
   }
   
   // in main.html's javascript :
   var data = localStorage.getItem('myMainKey');
   if (data !== undefined) {
       //do something
   }
   

Note : if you want to store and retrieve a complete javascript object, you would have to use JSON.stringify() / JSON.parse() for storing / retrieving it.

Solution 2

you can also do this:-

window.location.href="main.html?data="+data;

In main.html

  var user = decodeURI(getUrlVars()["src"]);
   `//Now do some stuff with this data`

   `function getUrlVars() {
    var vars = [], hash;
    var hashes = 
    window.location.href.slice(window.location.href.indexOf('?') + 
    1).split('&');
   for (var i = 0; i < hashes.length; i++) {
   hash = hashes[i].split('=');
   vars.push(hash[0]);
   vars[hash[0]] = hash[1];
   }
   return vars;
   }`