How to use jQuery query string?

Question

Ok. Basically I am developing a API for Game Server owners who want a custom loading screen that fetches the players name and avatar, but does not use PHP, only JavaScript, AJAX, HTML etc.

This is what I've come up with so far:

<!DOCTYPE html>
<html>
<head><title></title>
<script src="//static.sidewaykill.com/js/jQuery/1.5.2.min.js"></script>
<script src="//static.sidewaykill.com/js/jQuery/ExtDomain.js"></script>
</head>
<body>
<script type="text/javascript">
(function($) {
    $.QueryString = (function(a) {
        if (a == "") return {};
        var b = {};
        for (var i = 0; i < a.length; ++i)
        {
            var p=a[i].split('=');
            if (p.length != 2) continue;
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
        }
        return b;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

 $.get('http://api.sidewaykill.com/steam/name.php?id=76561198017389807')
 .success(function(data) {
     $('#steamname').html(data);
 });
</script>
Welcome <span id="steamname"></span>.<br /><br />
<img src="http://api.sidewaykill.com/steam/avatar.php?id=76561198017389807" alt="Player Avatar" />
</body>
</html>

All I want to do is figure out how to replace those ID= values with the ones provided by the Game. For example, if you access the page via http://server.com/loading.html?id=76561198017389807, it will call api.sidewaykill.com/steam/name.php?id=76561198017389807 and the image api.sidewaykill.com/steam/avatar.php?id=76561198017389807. How would I do this with more jQuery?

The question is not very clear. What is it that you want jQuery to do? Are you loading this page in a browser, or a custom frame of some sort? Like QT/MFC/AnyLib HTML views? Please elaborate a little clearly. — , Mar 11 '13 at 10:09
I'm loading this in a page, using a game. The game loads this page while joining a server (Garry's Mod), and it gives the page the SteamID64, which requires PHP to parse. I'm making a way to do this without the creator using any serverside scripting. — Skilledway, Mar 11 '13 at 10:17
Why are you using such an old version of jQuery, if your starting this from scratch you could easily use a later version as you have no code to review? — GGJ, Mar 11 '13 at 10:19
Yeah, I will use a different version of jQuery, I don't even know why I used this version. — Skilledway, Mar 11 '13 at 11:40

Husman · Answer 1 · 2013-03-11T10:16:15.610

0

Not exactly a jQuery answer, but pure Javascript:

var idvalue = decodeURI( (RegExp('id=' + '(.+?)(&|$)').exec(location.search)||[,null])[1] );

will give you the value of the id from the GET part of the URL, now you can plug it into parts of your HTML document and Ajax URLs.

Using jQuery you can try this out: http://www.jquery4u.com/snippets/url-parameters-jquery/

You mean something like this to plug the value in?

$('#imgid').src = 'http://api.sidewaykill.com/steam/avatar.php?id=' + idvalue;

edited Mar 11 '13 at 10:16

answered Mar 11 '13 at 10:11

Husman

6,304
7
27
44

I was asking how to plug it in, but thanks anyway. - EDIT: I realised you gave me the var, but it's been a long while since I've done any JavaScript, so how would I add that to my jQuery code, and get the image using the code? – Skilledway Mar 11 '13 at 10:11
Well if you gave your image an id attribute for the html tag, you could use the code I put in my edited post above.both of those lines would go into your document loading script, to run once the page has fully loaded. – Husman Mar 11 '13 at 10:24

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

No php makes it significantly harder, otherwise it's just a simple:

$.get('http://api.sidewaykill.com/steam/name.php?id=<?= $_GET['id'] ?>')

But you can use the function here:

Parse query string in JavaScript

and call:

var id = getQueryVariable('id');
$.get('http://api.sidewaykill.com/steam/name.php?id='+id)

edited May 23 '17 at 12:11

Community

1
1

answered Mar 11 '13 at 10:15

Scott Yang

2,018
2
15
18

score 0 · Answer 3 · answered Mar 11 '13 at 10:17

$.QueryString.id will hold the value of your ID using the $.QueryString you have included.

Change image html to:

<img id="avatarimage" src="http://api.sidewaykill.com/steam/avatar.php?id=placeholderimageid" alt="Player Avatar" />

And the Javascript you want is

$.get('http://api.sidewaykill.com/steam/name.php?id=' + $.QueryString.id)
    .success(function(data) {
    $('#steamname').html(data);
});

$('#avatarimage').attr('src', 'http://api.sidewaykill.com/steam/avatar.php?id=' + $.QueryString.id);

Unfortunately, the Image part of your code does not output any image. - You can see the code I've used at http://api.sidewaykill.com/steam/example.html?id=76561198017389807 — Skilledway, Mar 12 '13 at 04:56

How to use jQuery query string?

3 Answers3