Send JSON object to new page with jQuery

Question

I'm trying to send JSON data (demographics) to a new page (within the same directory) when a user clicks the marker I've placed on a google map on my page. I'm using the jquery-ui-map plugin right now and the marker and click event works fine but as you can see in the code, I'm trying to transfer a JSON object to the next page (demo-data.html). I tried using $.ajax but ran into the CORS issue.

So my question is, how can I send that JSON array to the next page and then retrieve it when the next page (demo-data.html) loads so I can place the text into the appropriate places?

PS - I'm not able to use server-side scripting

Thanks!

$(document).bind('pageshow', function () {
  var mapdata = { destination: new google.maps.LatLng(59.3327881, 18.064488100000062) };
  var demographics =
  {
    city: 'Stockholm',
    county: '',
    state: 'Germany',
    lat: 59.3327881,
    long: 18.064488100000062,
    type: 'Standard',
    population: 1000000,
    housing: 800000,
    income: 50000,
    landarea: 1000000,
    waterarea:10000,
    decomissioned: 'No',
    militarycodes: ''
  };

  $('h1').text('Stockholm, Germany');

  $('#map_canvas').gmap(
    {
        'center' : mapdata.destination,
        'zoom' : 12
    })
    .bind('init', function(evt, map) {
        $('#map_canvas').gmap('addMarker',
            {
                'position' : map.getCenter(),
                'animation' : google.maps.Animation.DROP
            }, function(map, marker) {
                $(marker).click(function() {

                    $.ajax({
                        url: 'demo-data.html',
                        type: 'POST',
                        data: JSON.stringify(demographics),
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        async: false,
                        success: function(msg) {
                            alert(msg);
                        }
                    });
                });
            });
      });
});

@frictionlesspulley No I have not, I still don't understand the difference between json and jsonp so I guess I should look that up. — J2N, Jun 13 '12 at 15:06

score 3 · Answer 1 · edited May 23 '17 at 12:03

3

The first thing that springs to mind for me would be to save the JSON object in a cookie and retrieve it on the next page after you jump.

jquery save json data object in cookie

edited May 23 '17 at 12:03

Community

1
1

answered Jun 13 '12 at 13:57

ConorLuddy

2,217
2
19
18

Thanks for this, I think I'm going to use URL parameters but I've never used cookies before and that link looks like a good place to learn some new stuff. – J2N Jun 13 '12 at 14:56
I haven't used them much myself either, but that answer seems to make it look easy :) Good luck with it! – ConorLuddy Jun 13 '12 at 15:18

score 2 · Accepted Answer · answered Jun 13 '12 at 13:58

2

I would pass everything via URL parameters.

answered Jun 13 '12 at 13:58

sczizzo

3,196
20
28

I was about to suggest something similar, by encoding the Json string into a Base64 string and then passing it over to be decoded on the other page. – Gavin Jun 13 '12 at 14:01
2

Keep in mind the browser specific maximum URL length. If you are passing data which has no set predictable limit you might get into trouble. For IE see http://support.microsoft.com/kb/208427 for details. To Quote from there: `Microsoft Internet Explorer has a maximum uniform resource locator (URL) length of 2,083 characters. Internet Explorer also has a maximum path length of 2,048 characters. This limit applies to both POST request and GET request URLs.` For other browsers I'm sure they posted it on their respetive sites too somewhere. – Nope Jun 13 '12 at 14:02
@Gavin: Nice mentioning of encoding. that would also shorten the length of what you send over the URL. – Nope Jun 13 '12 at 14:05
@sczizzo And I would use a GET request to the page I want to load? – J2N Jun 13 '12 at 14:22
@Gavin If I were to encode it into Base64 would I then need to POST it to the next page? – J2N Jun 13 '12 at 14:24
2

@JLaw - If you Base64 encode the Json'd string, you can then pass it via a single GET parameter. On the second page, you can then use Javascript to decode the Base64 string and convert back into an Object. The only issue is that you can't use Ajax (CORS - assuming it's a page on a different domain) so you will need to open a new window, or use `window.location.href` to change the current page. – Gavin Jun 13 '12 at 14:27
@Gavin Awesome, I'm using btoa and atob along with JSON's stringify and parse functions now and it looks like it will work great. – J2N Jun 13 '12 at 14:53
I'm still confused as to what jQuery function I need to call from the sending page to get the string to the receiving page. Would $.ajax still run into the CORS problem? – J2N Jun 13 '12 at 14:55
@sczizzo Ah, I see that now. Sorry about that. Thanks to everyone for the help! – J2N Jun 13 '12 at 15:21

Send JSON object to new page with jQuery

2 Answers2