[JavaScript] QueryString - Komplexe Parameter nun auch für JavaScript!

Murdoc · 9. November 2011

QueryString - Komplexe Parameter nun auch für JavaScript!

Bisher war man beim arbeiten mit window.location.search recht eingeschränkt, vor allem wenn die Parameter immer komplexer wurden, weil PHP damit keine Probleme hat.

Aus diesem Grund hab ich eine kleine Komponente erstellt, mit der es nun möglich ist komplexe Parameter in JavaScript-Objekte zu decodieren -> ohne einen einzigen Einsatz von eval() (php.js *hust*).

Code:

var query = "foo[1][foo][][2]=1&bar=1";

QueryString.decode(query);
// -> { "foo": [ null, { "foo": [ [ null, null, 1] ] } ], "bar": 1 }

Ja ... ernsthaft, sowas ist möglich

Aber das war noch nicht alles. Mit QueryString ist es auch möglich vorhandene Objekte in (je nach Art) komplexe Parameter zu encodieren!

Code:

var obj = { foo: [ { "bar": [ 1, 2, { "bar": 1 } ] } ] };

QueryString.encode(obj);
// -> foo[0][bar][0]=1&foo[0][bar][1]=2&foo[0][bar][2][bar]=1

----------------

Diese Komponente ist nun auch in JNode (mein Framework) verfügbar via JNode.Query

Weitere Infos hier:
[JavaScript] JNode: JavaScript Framework - RR:Board

QueryString auf GitHub:

raidrush-dev/querystring-parser · GitHub

Download:

http://murdoc.eu/querystring/querystring.js

http://murdoc.eu/querystring/querystring.min.js

Anzeige

onip · 9. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

hi,

ich bin leider kein großer fan von jQuery, weiß auch nicht warum.
lieber eigne ich mir dein framework an
hab mit mooTools begonnen und find das arbeiten irgendwie besser als jQuery.
gibt es dazu ein pendant zu mooTools?
oder was dagegen, wenn ich mich mal versuche eine umsetzung dazu zu machen?

ich kann mich immer und immer wiederholen, ich ziehe mein hut vor dir, danke.

// edit
bw muss warten, geht grad bei dir nicht.

// edit 2
brauch ich überhabt jQuery für JQueryString?

HTML:

<script type="text/javascript" src="js/jquerystring.js"></script>
<script type="text/javascript">
var query = "foo[1][foo][][2]=1&bar=1";
JQueryString.decode(query);
</script>

Fehler: host is null
Quelldatei: jquerystring.js
Zeile: 201

@DerEntscheider
zwangsläufig mach ich jQuery, bin halt nur nicht ein fan

DerEntscheider · 9. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

Tu es!
Die Mehrheit nutzt jQuery.
Das heisst du hast keine Probleme wenn der Source mal von jemandem anders kommt.
Ich kenne JS ohne jQuery schon nicht mehr ..

Und MooTools .. Naja hatten letzten mal ne Diskussion auf der Arbeit darüber ..
War nicht gut ..

Benutzen kannst du was du magst, aber können solltest du jQuery dennoch.

Nanobyte · 9. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

Der Funktionsname ist etwas "schlecht" gewählt Murdoc

@onip: Die Funktion heißt im Grunde nur QueryString, aber da Murdocs Framework JNode heißt hängt er vor jede Funktion ein J => JQueryString, daher die Verwechslung mit JQuery.

jQuery != JQuery

@DerEntscheider:
Ich nutze auch jQuery, aber die Mehrheit?
Wenn jemand in seinem Sourcecode baut macht jQuery das nicht weg.
Wenn du Javascript nicht mehr kennst, dann solltest du dringend was dagegen tun.

DerEntscheider · 9. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

Ja die Mehrheit.
Hab ich bis jetzt zumindest so erlebt.
Wenn der Code ist dann hilft auch Javascript nicht.
Es ging mir nur darum, dass er jQuery kennenlernt.

Fast alle Kundenprojekte die bei uns rausgehen sind mit jQuery ausgestattet.

Murdoc · 9. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

ich dachte mit "standalone" sollte es eigl. keine missverständnisse geben ^^

jQuery wird natürlich nicht benötigt. ich denk mir nen anderen namen aus

@onip
der fehler ist bereits behoben, nur war mein ftp nicht aktuell.

zu jQuery:
jQuery hat einen riesen vorteil gegenüber mootools und prototype: es modifiziert das DOM nicht und ist daher schneller in IE < 8.

ein umfassender artikel dazu von einem der prototype entwickler:

Whats wrong with extending the DOM — Perfection Kills

ich programmiere aber schon mit prototype, da gab es jquery noch garnicht und hab daher die funktionsweise und philosophie von prototype entsprechend verinnerlicht.

und man wechselt nicht einfach sein framework, nur weil es nicht mehr an platz 1 steht. zudem weiß ich, dass intern bereits an prototype2 gearbeitet wird.

onip · 10. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

ich hoffe es artet hier nicht aus, von wegen "jQuery weil, mooTools nicht weil ...".
könnten wir dazu ein thread auf machen, damit jeder seine erfahrungen eintragen kann,
beispiele veröffentlicht und sagt warum so besser anders nicht.

@murdoc
wie wäre es deutsche bezeichnungen zu nehmen.
z.b. JZeichenAbfragen
ne spass bei seite ich hab folgende gemacht und scheint nicht richtig zu sein?

HTML:

<script type="text/javascript" src="js/querystring.js"></script>
<script type="text/javascript">
function outPut (res){
 document.write('<ul>');
 for (z in res){
 document.write('<li>'+z+': '+res[z]+' ('+typeof res[z]+')');
 if (typeof res[z] == 'object'){
 outPut (res[z]);
 }
 document.write('</li>');
 }
 document.write('</ul>');
}

document.write('<h1>JQueryString.decode</h1>');
var query = "foo[1][foo][][2]=1&bar=1";
var res = JQueryString.decode(query);
outPut (res);
document.write('<h1>JQueryString.encode</h1>');
var reRes = JQueryString.encode(res);
document.write(res);
</script>

Fehler: Parse error: value for key "foo[0]" is not serializeable
Quelldatei: querystring.js
Zeile: 392

Murdoc · 10. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

fixed

Download:

http://murdoc.eu/jquerystring/querystring.js

http://murdoc.eu/jquerystring/querystring.min.js

onip · 10. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

sorry wenn ich dich damit nerve.
sollte folgender code nich foo=bar&fooz=barz ausgeben?

HTML:

<script type="text/javascript">
document.write('<h1>QueryString.encode</h1>');
myQuery = {'foo': 'bar', 'fooz': 'barz'};
var res = QueryString.encode(myQuery);
for (z in res){
 document.write(z+': '+res[z]);
 document.write('<br>');
}
</script>

ausgabe

Code:

0: f
1: o
2: o
3: =
4: b
5: a
6: r
7: &
8: f
9: o
10: o
11: z
12: =
13: b
14: a
15: r
16: z

erwartet

Code:

0: foo=bar&fooz=barz

Nanobyte · 10. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

Das Ergebnis ist richtig, denn die Funktion gibt einen String zurück der wie ein Array angesprochen werden kann:

HTML:

'test'[0] // t
'test'[1] // e
'test'[2] // s
'test'[3] // t

Murdoc · 10. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

zumal "for ... in" eh nur bei objekten und nicht bei arrays funktioniert
bei arrays oder array-like objekten immer ne zähler schleife verwenden.

onip · 10. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

sorry, mein fehler.
hatte zwar

HTML:

alert(typeof res); // string

ausgeführt, aber nicht richtig geguckt.
daher meine schleife, die natürlich überflüssig ist.

so ist es richtig:

HTML:

<script type="text/javascript">
document.write('<h1>QueryString.encode</h1>');
myQuery = {'foo': 'bar', 'fooz': 'barz'};
var res = QueryString.encode(myQuery);
document.write(res);
</script>

ausgabe

Code:

foo=bar&fooz=barz

hier nochmal alles zusammen, getestet.

HTML:

<script type="text/javascript" src="js/querystring.js"></script>
<script type="text/javascript">
function outPut (res){
 document.write('<ul>');
 for (z in res){
 document.write('<li>'+z+': '+res[z]+' ('+typeof res[z]+')');
 if (typeof res[z] == 'object'){
 outPut (res[z]);
 }
 document.write('</li>');
 }
 document.write('</ul>');
}

document.write('<h1>QueryString.encode</h1>');
myQuery = {'foo': 'bar', 'fooz': 'barz', 'ar': ['x','y',['z']], 'obj': {'x':'y', 'z': ['x']}};
var res = QueryString.encode(myQuery);
document.write(res);

document.write('<h1>QueryString.decode</h1>');
res = QueryString.decode(res);
outPut (res);
</script>

ausgabe

Code:

QueryString.encode
foo=bar&fooz=barz&ar[0]=x&ar[1]=y&ar[2][0]=z&obj[x]=y&obj[z][0]=x

QueryString.decode
 foo: bar (string)
 fooz: barz (string)
 ar: x,y,z (object)
 0: x (string)
 1: y (string)
 2: z (object)
 0: z (string)
 obj: [object Object] (object)
 x: y (string)
 z: x (object)
 0: x (string)

eine echt tolle sache, danke dir.

Murdoc · 12. November 2011

AW: JQueryString - Komplexe Parameter nun auch für JavaScript!

läuft nun auch mit NodeJS / CommonJS und deren module-system

Code:

var qs = require("querystring");
qs.encode(...);
qs.decode(...);

Nützliche Suchen

[JavaScript] QueryString - Komplexe Parameter nun auch für JavaScript!

Videos zum Themenbereich