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.

This code is really not what we need to see if it is working. What we need to see is everything from main.html. What is supposed to happen there? Please provide the relevant HTML/Javascript/etc related to *that* page. — KJ Price, Jan 30 '15 at 13:47

score 9 · Accepted Answer · edited Aug 22 '17 at 21:31

There are two main ways to achieve that :

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

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.

score 1 · Answer 2 · answered Jul 21 '17 at 08:13

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;
   }`

score 0 · Answer 3 · edited May 23 '17 at 11:59

You would have to send that data in the querystring and reconstruct it with javascript. Or you would have to POST to a handler/controller (who knows what you are using..) with that json data and reconstruct it... either way you if you are going to change the location you will have to send the data.

If you are using HTML5 then local storage would be a good option as LeGEC advised.

Storing Objects in HTML5 localStorage

score 0 · Answer 4 · answered Jan 30 '15 at 13:52

Here's function that can be applied if you're using jQuery.

var redirect = 'http://www.example.com/';
$.redirectPost(redirect, {x: 'exemplo', y: '123'});

// jquery extend function
$.extend(
{
    redirectPost: function(location, args)
    {
        var form = '';
        $.each( args, function( key, value ) {
            value = value.split('"').join('\"')
            form += '<input type="hidden" name="'+key+'" value="'+value+'">';
        });
        $('<form action="' + location + '" method="POST">' + form + '</form>').appendTo($(document.body)).submit();
    }
});

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

4 Answers4