Wie Query-String mit Javascript bauen

Question

Nur frage mich, ob es etwas eingebaut, um Javascript ist, die eine Form annehmen kann und die Abfrageparameter zurückgeben, zB: "var1 = Wert & var2 = Wert2 & arr [] = foo & arr [] = bar ..."

Ich habe mich gefragt, dies seit Jahren.

Answer 1

Ich habe versucht, eine Antwort auf diese Frage vor einiger Zeit zu suchen, aber ich beenden meine eigene Funktion bis zu schreiben, die die Werte aus dem Formular extrahiert ..

es ist nicht perfekt, aber es passt meine Bedürfnisse.

function form_params( form )
{
    var params = new Array()
    var length = form.elements.length
    for( var i = 0; i < length; i++ )
    {
        element = form.elements[i]

        if(element.tagName == 'TEXTAREA' )
        {
            params[element.name] = element.value
        }
        else if( element.tagName == 'INPUT' )
        {
            if( element.type == 'text' || element.type == 'hidden' || element.type == 'password')
            {
                params[element.name] = element.value
            }
            else if( element.type == 'radio' && element.checked )
            {
                if( !element.value )
                    params[element.name] = "on"
                else
                    params[element.name] = element.value

            }
            else if( element.type == 'checkbox' && element.checked )
            {
                if( !element.value )
                    params[element.name] = "on"
                else
                    params[element.name] = element.value
            }
        }
    }
    return params;
}

form_params gibt eine (Schlüssel -> Wert) Zuordnung der Parameter. der Eingang ist das Formelement (DOM-Element)

Es ist nicht behandeln Felder, die Mehrfachauswahl ermöglichen.

Answer 2

Ohne jQuery

var params = {
    parameter1: 'value_1',
    parameter2: 'value 2',
    parameter3: 'value&3' 
};

var esc = encodeURIComponent;
var query = Object.keys(params)
    .map(k => esc(k) + '=' + esc(params[k]))
    .join('&');

Für Browser, die die .map... Zeile

nicht Pfeil Funktion Syntax unterstützen, die ES5 erfordert, ändern

    .map(function(k) {return esc(k) + '=' + esc(params[k]);})

Answer 3

Wenn Sie jQuery verwenden Sie könnten jQuery.param() http prüfen wollen: //api.jquery. com / jQuery.param /

Beispiel:

var params = {
    parameter1: 'value1',
    parameter2: 'value2',
    parameter3: 'value3' 
};
​var query = $.param(params);
document.write(query);

Answer 4

Dies ist nicht direkt beantworten Ihre Frage, aber hier ist eine generische Funktion, die eine URL erstellen wird, die Query-String-Parameter enthält. Die Parameter (Namen und Werte) für die Aufnahme in einer URL sicher entkommen.

function buildUrl(url, parameters){
  var qs = "";
  for(var key in parameters) {
    var value = parameters[key];
    qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
  }
  if (qs.length > 0){
    qs = qs.substring(0, qs.length-1); //chop off last "&"
    url = url + "?" + qs;
  }
  return url;
}

// example:
var url = "http://example.com/";

var parameters = {
  name: "George Washington",
  dob: "17320222"
};

console.log(buildUrl(url, parameters));
// => http://www.example.com/?name=George%20Washington&dob=17320222

Answer 5

Es gibt jetzt APIs für diese, insbesondere die URLSearchParams API . Für das Beispiel gegeben:

const params = new URLSearchParams();
const formvals = {
   var1: "value",
   var2: "value2",
   arr: "foo",
};
for (const [key, val] of Object.entries(formvals)) {
   params.append(key, val);
}
console.log(params.toString());
// var1=value&var2=value2&arr=foo

Hinweis: Es ist ziemlich kompatibel mit Chrome und Firefox in diesen Tagen, aber seien Sie vorsichtig, wenn Sie mit Microsoft und Apple-Browser müssen arbeiten, da die Kompatibilität Teil ist.

Answer 6

Mit jQuery können Sie dies tun, indem $.param

$.param({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> "action=ship&order_id=123&fees%5B%5D=f1&fees%5B%5D=f2&label=a+demo"

Answer 7

ES2017 (ES8)

Die Nutzung von Object.entries() , welche gibt ein Array von Paaren [key, value] des Objekts. Zum Beispiel für {a: 1, b: 2} wäre es [['a', 1], ['b', 2]] zurückzukehren. Es wird nicht unterstützt (und wird nicht sein) nur durch IE.

Code:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

Beispiel:

buildURLQuery({name: 'John', gender: 'male'});

Ergebnis:

"name=John&gender=male"

Answer 8

Nein, ich glaube nicht, Standard JavaScript, dass in gebaut hat, aber Prototype JS hat diese Funktion (sicherlich die meisten anderen JS-Frameworks zu haben, aber ich kenne sie nicht), sie nennen es serialisiert .

Ich kann Prototype JS empfehlen, es ganz in Ordnung funktioniert. Der einzige Nachteil ich wirklich habe bemerkt, es seine Größe (ein paar hundert kb) und Umfang (viel Code für Ajax, dom, etc.). Wenn Sie also nur eine Form Serializer wollen ist es übertrieben, und im engeren Sinne, wenn Sie es Funktionalität Ajax wollen (Wich ist vor allem, was ich es für verwendet wird), es ist übertrieben. Es sei denn, Sie vorsichtig sind können Sie feststellen, dass es ein wenig zu viel „Magie“ tut (wie jedes dom Element erstreckt es nur mit Prototype JS Funktionen berührt Elemente zu finden), die es auf extremen Fällen verlangsamen.

Answer 9

Abfragezeichenfolgeflag helfen können.

So können Sie

const querystring = require('querystring')

url += '?' + querystring.stringify(parameters)

Answer 10

Wenn Sie nicht über eine Bibliothek verwenden möchten, sollte dies die meisten decken / alle die gleichen Form Elementtypen.

function serialize(form) {
  if (!form || !form.elements) return;

  var serial = [], i, j, first;
  var add = function (name, value) {
    serial.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
  }

  var elems = form.elements;
  for (i = 0; i < elems.length; i += 1, first = false) {
    if (elems[i].name.length > 0) { /* don't include unnamed elements */
      switch (elems[i].type) {
        case 'select-one': first = true;
        case 'select-multiple':
          for (j = 0; j < elems[i].options.length; j += 1)
            if (elems[i].options[j].selected) {
              add(elems[i].name, elems[i].options[j].value);
              if (first) break; /* stop searching for select-one */
            }
          break;
        case 'checkbox':
        case 'radio': if (!elems[i].checked) break; /* else continue */
        default: add(elems[i].name, elems[i].value); break;
      }
    }
  }

  return serial.join('&');
}

Answer 11

Sie brauchen nicht wirklich eine Form dies mit Prototype zu tun. Verwenden Sie einfach Object.toQueryString Funktion :

Object.toQueryString({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })

// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'

Answer 12

Ich bin mir nicht ganz sicher, ich selbst, ich erinnere sehen jQuery es in einem solchen Ausmaß hat, aber es behandelt nicht hierarchische Aufzeichnungen überhaupt, geschweige denn in einer PHP-freundliche Art und Weise.

Eine Sache, die ich für bestimmte wissen, ist, wenn URLs zu bauen und das Produkt in den dom kleben, nicht einfach String-Kleber verwenden, es zu tun, oder Sie finden sich zu einer praktischen Seite Brecher eröffnen.

Zum Beispiel können bestimmte Werbesoftware in-Linien die String-Version von was auch immer läuft Ihre Flash. Das ist in Ordnung, wenn seine adobes generic einfacher String, aber aber das ist sehr naiv, und bläst in einer peinlichen Chaos für Personen die Gnash installiert haben, als gnash'es Version String geschieht mit URLs zu einer ausgewachsenen GPL Copyright-Lizenzen, komplett enthält und Tags. Mit diesem in der Zeichenfolge-glue Inserent Generator, führt zur Seite offener Blasen und unausgewogene HTML mit in dem dom Aufdrehen.

Die Moral der Geschichte:

   var foo = document.createElement("elementnamehere"); 
   foo.attribute = allUserSpecifiedDataConsideredDangerousHere; 
   somenode.appendChild(foo); 

Nicht:

   document.write("<elementnamehere attribute=\"" 
        + ilovebrokenwebsites 
        + "\">" 
        + stringdata 
        + "</elementnamehere>");

_{Google braucht diesen Trick zu lernen. Ich habe versucht, das Problem zu melden, sie scheinen nicht zu kümmern.}

Answer 13

Wie Stein sagt, können Sie den Prototyp JavaScript-Bibliothek von http://www.prototypejs.org . Fügen Sie die JS und es ist sehr einfach dann, $('formName').serialize() zurückkehren wird, was Sie wollen!

Answer 14

Für diejenigen von uns, die jQuery bevorzugen, würden Sie das Formular-Plugin verwenden: http: // plugins. jquery.com/project/form , die eine formSerialize Methode enthält.

Answer 15

Sie können mit FormData und URLSearchParams ohne die Notwendigkeit, eine Schleife über alles, was heute tun.

const formData = new FormData(form);
const searchParams = new URLSearchParams(formData);
const queryString = searchParams.toString();

Ältere Browser eine polyfill benötigen, though.

Answer 16

Diese Antworten sind sehr hilfreich, aber ich möchte eine andere Antwort schreiben, die Sie bauen vollständige URL kann helfen. Dies kann Ihnen Basis url, path, hash und parameters helfen verketten.

var url = buildUrl('http://mywebsite.com', {
        path: 'about',
        hash: 'contact',
        queryParams: {
            'var1': 'value',
            'var2': 'value2',
            'arr[]' : 'foo'
        }
    });
    console.log(url);

können Sie kostenlos herunterladen über npm https://www.npmjs.com/package/build- url

Demo:

;(function () {
  'use strict';

  var root = this;
  var previousBuildUrl = root.buildUrl;

  var buildUrl = function (url, options) {
    var queryString = [];
    var key;
    var builtUrl;
    var caseChange; 
    
    // 'lowerCase' parameter default = false,  
    if (options && options.lowerCase) {
        caseChange = !!options.lowerCase;
    } else {
        caseChange = false;
    }

    if (url === null) {
      builtUrl = '';
    } else if (typeof(url) === 'object') {
      builtUrl = '';
      options = url;
    } else {
      builtUrl = url;
    }

    if(builtUrl && builtUrl[builtUrl.length - 1] === '/') {
      builtUrl = builtUrl.slice(0, -1);
    } 

    if (options) {
      if (options.path) {
          var localVar = String(options.path).trim(); 
          if (caseChange) {
            localVar = localVar.toLowerCase();
          }
          if (localVar.indexOf('/') === 0) {
              builtUrl += localVar;
          } else {
            builtUrl += '/' + localVar;
          }
      }

      if (options.queryParams) {
        for (key in options.queryParams) {
          if (options.queryParams.hasOwnProperty(key) && options.queryParams[key] !== void 0) {
            var encodedParam;
            if (options.disableCSV && Array.isArray(options.queryParams[key]) && options.queryParams[key].length) {
              for(var i = 0; i < options.queryParams[key].length; i++) {
                encodedParam = encodeURIComponent(String(options.queryParams[key][i]).trim());
                queryString.push(key + '=' + encodedParam);
              }
            } else {              
              if (caseChange) {
                encodedParam = encodeURIComponent(String(options.queryParams[key]).trim().toLowerCase());
              }
              else {
                encodedParam = encodeURIComponent(String(options.queryParams[key]).trim());
              }
              queryString.push(key + '=' + encodedParam);
            }
          }
        }
        builtUrl += '?' + queryString.join('&');
      }

      if (options.hash) {
        if(caseChange)
            builtUrl += '#' + String(options.hash).trim().toLowerCase();
        else
            builtUrl += '#' + String(options.hash).trim();
      }
    } 
    return builtUrl;
  };

  buildUrl.noConflict = function () {
    root.buildUrl = previousBuildUrl;
    return buildUrl;
  };

  if (typeof(exports) !== 'undefined') {
    if (typeof(module) !== 'undefined' && module.exports) {
      exports = module.exports = buildUrl;
    }
    exports.buildUrl = buildUrl;
  } else {
    root.buildUrl = buildUrl;
  }
}).call(this);


var url = buildUrl('http://mywebsite.com', {
		path: 'about',
		hash: 'contact',
		queryParams: {
			'var1': 'value',
			'var2': 'value2',
			'arr[]' : 'foo'
		}
	});
	console.log(url);

Answer 17

Sie ist wahrscheinlich zu spät, um Ihre Frage zu beantworten.
Ich hatte die gleiche Frage, und ich wollte nicht zu halten Strings Anhänge eine URL zu erstellen. Also fing ich an, wie $ .param mit techhouse erläutert.
Ich fand auch eine URI.js Bibliothek, die die URLs leicht für Sie erstellt. Es gibt mehrere Beispiele, die Ihnen helfen. URI.js Dokumentation
Hier ist einer von ihnen:

var uri = new URI("?hello=world");
uri.setSearch("hello", "mars"); // returns the URI instance for chaining
// uri == "?hello=mars"

uri.setSearch({ foo: "bar", goodbye : ["world", "mars"] });
// uri == "?hello=mars&foo=bar&goodbye=world&goodbye=mars"

uri.setSearch("goodbye", "sun");
// uri == "?hello=mars&foo=bar&goodbye=sun"

// CAUTION: beware of arrays, the following are not quite the same
// If you're dealing with PHP, you probably want the latter…
uri.setSearch("foo", ["bar", "baz"]);
uri.setSearch("foo[]", ["bar", "baz"]);`

Answer 18

var params = { width:1680, height:1050 };
var str = jQuery.param( params );

console.log(str)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>