How do you use a URL variable inside a jQuery ajax function?

Question

I am trying to get a URL variable into a jQuery ajax function, in order to quickly adapt some code.

This should be simple, but i'm a bit of an idiot and using the methods described at http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html didn't work out for me.

Essentially I am trying to replace the hard-coded "player_tsid" with a variable on the end of a url, like http://www.example.com/?player_tsid=PIF575TP7IOBA

Here is the code ..

$(function(){

jQuery.support.cors = true;

$.ajax({
    'url' : 'http://api.glitch.com/simple/players.getAnimations',
    'dataType' : 'json',
    'data' : { 'player_tsid' : 'PIF1UFTOS10HF' },
    'success' : function(data, textStatus, jqXHR){
        if (data.ok){
            g_sheets = data.sheets;
            g_anims = data.anims;
            build_index();
            $('#loading').text("Loading sheets...");
            load_sheets();
        }else{
            alert('api error');
        }
    },
    'error' : function(jqXHR, textStatus, errorThrown){
        alert('api error');
        alert(errorThrown);
    }
});
});

,,

Why don't you put the desired player_tsid on there, server-side? as the player_tsid parameter is a get parameter, you can put it there at the server and make the javascript with the desired player_tsid embedded in it. — Saeed
– Saeed, Commented Aug 2, 2011 at 5:02
because the page should be personalized based on url, so it can be shared in the desired state. — grid
– grid, Commented Aug 2, 2011 at 5:47

ShankarSangoli · Accepted Answer · 2011-08-02 04:58:09Z

3

Just do this

var tsid = 'PIF1UFTOS10HF';
$.ajax({
    'url' : 'http://api.glitch.com/simple/players.getAnimations?player_tsid='+tsid,
    'dataType' : 'json',
    'success' : function(data, textStatus, jqXHR){
        if (data.ok){
            g_sheets = data.sheets;
            g_anims = data.anims;
            build_index();
            $('#loading').text("Loading sheets...");
            load_sheets();
        }else{
            alert('api error');
        }
    },
    'error' : function(jqXHR, textStatus, errorThrown){
        alert('api error');
        alert(errorThrown);
    }
});

answered Aug 2, 2011 at 4:58

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

grid Over a year ago

that works but is just hardcoding the variable in a different place.

ShankarSangoli Over a year ago

That was just an example. You can set any value that you need and append it to the url

grid Over a year ago

unfortunately when i comment out [or remove] var tsid = 'PIF1UFTOS10HF'; and append tsid=PIF1UFTOS10HF to the url instead, i get 'tsid is not defined'in the firebug JS console.

ShankarSangoli Over a year ago

That is because tsid is not available now since you commented it. What do you exactly need?

grid Over a year ago

i figured it out here: papermashup.com/read-url-get-variables-withjavascript - adding function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } var tsid = getUrlVars()["pp"]; where the url is appended with ?pp=PIF1UFTOS10HF

MD Sayem Ahmed · Accepted Answer · 2011-08-02 05:08:56Z

0

Or, you could use this -

var tsid = 'PIF1UFTOS10HF';

$.ajax(
{
    'type': "GET",
    'url': "http://api.glitch.com/simple/players.getAnimations",
    'dataType': "json",
    'data' : { 'player_tsid' : tsid },
    'success' : function(data, textStatus, jqXHR)
    {
        if (data.ok)
        {
            g_sheets = data.sheets;
            g_anims = data.anims;
            build_index();
            $('#loading').text("Loading sheets...");
            load_sheets();
        }
        else
        {
            alert('api error');
        }
    },
    'error' : function(jqXHR, textStatus, errorThrown)
    {
        alert('api error');
        alert(errorThrown);
    }
});

answered Aug 2, 2011 at 5:08

MD Sayem Ahmed

29.3k27 gold badges115 silver badges183 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:33:34Z

An SO Answer for you: How can I get query string values in JavaScript?

Basically:

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}


$(function(){

jQuery.support.cors = true;

$.ajax({
    'url' : 'http://api.glitch.com/simple/players.getAnimations',
    'dataType' : 'json',
    'data' : { 'player_tsid' : getParameterByName("player_tsid") },
    'success' : function(data, textStatus, jqXHR){
        if (data.ok){
            g_sheets = data.sheets;
            g_anims = data.anims;
            build_index();
            $('#loading').text("Loading sheets...");
            load_sheets();
        }else{
            alert('api error');
        }
    },
    'error' : function(jqXHR, textStatus, errorThrown){
        alert('api error');
        alert(errorThrown);
    }
});
})

I also like this answer to the same question

Collectives™ on Stack Overflow

How do you use a URL variable inside a jQuery ajax function?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related