PDA

View Full Version : Javascript GET strings



timbaker1991
10-02-2011, 01:21 PM
Okay so I have this code for HMTL5 Canvas, however this is a JavaScript directed question not a Canvas question.



<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(0,400);
cxt.lineTo(50,a);
cxt.lineTo(100,b);
cxt.lineTo(150,390);
cxt.lineTo(200,300);
cxt.lineTo(250,285);
cxt.lineTo(300,299);
cxt.lineTo(350,250);
cxt.lineTo(400,325);
cxt.lineTo(450,275);
cxt.lineTo(500,300;);
cxt.stroke();

</script>
That will draw a line graph, however I want to get the coordinates from a variable in the URL. So it may be example.com/a=500&b=600 . How would I retrieve these two variables and then insert in to they're respective places?

Any help greatly appreciated, please make it as simple as possible - I'm good with my PHP now but JavaScript is all new

rangana
10-02-2011, 01:49 PM
You might find this script useful:


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


Assuming you have this URL:
http://www.codingforums.com/showthread.php?t=239716

...and you want to get the value from the t parameter so you call the function as:
alert(getURIval( 't' )); // returns 239716

Secondly, you have a typo on your script here (remove highlighted):


cxt.lineTo(500,300;);


Hope that helps.

ironboy
10-02-2011, 03:31 PM
@rangana : Nice function. :)

If you prefer to have your all get parameters accesible from an object (similar to PHP where they are accesible from an associative array) you can do:

var _get = (function(){
var i, p,x, obj = {};
x = location.search.slice(1).split('&');
for(var i = 0; i < x.length;i++){
p = x[i].indexOf('=');
obj[x[i].slice(0,p)] =
decodeURIComponent(x[i].slice(p+1));
};
return obj
})();

Now you can ask for the get parameters like this:

_get.x // retrieving parameter x
_get.y // retrieving parameter y etc.


And you can also loop through all the parameters:

for(var i in _get){
console.log('get parameter','name: ' + i, 'value: ',_get[i]);
}

Logic Ali
10-02-2011, 06:29 PM
If you prefer to have your all get parameters accesible from an object (similar to PHP where they are accesible from an associative array) you can do:

var _get = (function(){
var i, p,x, obj = {};
x = location.search.slice(1).split('&');
for(var i = 0; i < x.length;i++){
p = x[i].indexOf('=');
obj[x[i].slice(0,p)] =
decodeURIComponent(x[i].slice(p+1));
};
return obj
})();

It's important to handle &amp; as well.


var _get = (function()
{
var i, p, x, obj = {},
x = location.search.slice( 1 ).split( /\&(?:amp\;)?/ );

for( var i = 0; i < x.length; i++ )
{
p = x[ i ].split( '=' );
obj[ p[ 0 ] ] = decodeURIComponent( p[ 1 ] );
}

return obj;
})();

ironboy
10-02-2011, 06:41 PM
Agreed. The question is should it be handled as a separator? (Or is it intentional as part of a value?)

But if we agree on the first one your take on my code snippet is a real improvement. :thumbsup:

However I was trying to provide for multiple = between &:s (that I wanted to treat as part of the value).
You don't. Any reasoning behind this? :o

timbaker1991
10-02-2011, 08:24 PM
Thank you everyone that helped me out perfectly!

I've now got a separate question which I have titled 'Making a popup on Canvas scroll over' if any of you are able to help with that it would be greatly received.