So erstellen Sie eine Abfragezeichenfolge mit Javascript

Ich frage mich nur, ob in Javascript etwas integriert ist, das ein Formular annehmen und die Abfrageparameter zurückgeben kann, z. "var1=value&var2=value2&arr[]=foo&arr[]=bar..."

Ich habe mich das seit Jahren gefragt.

Ich habe vor einiger Zeit versucht, nach einer Antwort auf diese Frage zu suchen, aber am Ende habe ich meine eigene Funktion geschrieben, die die Werte aus dem Formular extrahiert.

Es ist nicht perfekt, aber es passt zu meinen Bedürfnissen.

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 zurück. Die Eingabe ist das Formularelement (DOM-Element).

Es werden keine Felder verarbeitet, die eine Mehrfachauswahl ermöglichen.

2k20-Update: Verwenden Sie Joshs Lösung mit URLSearchParams.toString () .

Alte Antwort:

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('&');

Ändern Sie für Browser, die keine Pfeilfunktionssyntax unterstützen, für die ES5 erforderlich ist, die .map...Zeile in

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

Wenn Sie jQuery verwenden, sollten Sie http://api.jquery.com/jQuery.param/ überprüfen.jQuery.param()

Beispiel:

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

Die URLSearchParams-API ist in allen modernen Browsern verfügbar. Beispielsweise:

const params = new URLSearchParams({
  var1: "value",
  var2: "value2",
  arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&var2=value2&arr=foo"

Dies beantwortet Ihre Frage nicht direkt, aber hier ist eine generische Funktion, die eine URL erstellt, die Abfragezeichenfolgenparameter enthält. Die Parameter (Namen und Werte) werden zur Aufnahme in eine URL sicher maskiert.

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

Mit jQuery können Sie dies tun, indem Sie $.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"

ES2017 (ES8)

Verwenden von Object.entries(), wodurch ein Array von Objektpaaren zurückgegeben [key, value]wird. Zum Beispiel {a: 1, b: 2}würde es zurückkehren [['a', 1], ['b', 2]]. Es wird nicht nur vom IE unterstützt (und wird es auch nicht sein).

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"

Nein, ich glaube nicht, dass Standard-JavaScript das eingebaut hat, aber Prototype JS hat diese Funktion (sicherlich haben die meisten anderen JS-Frameworks auch, aber ich kenne sie nicht), sie nennen es serialisieren .

Ich kann Prototype JS empfehlen, es funktioniert ganz gut. Der einzige Nachteil, den ich wirklich bemerkt habe, ist die Größe (einige hundert KB) und der Umfang (viel Code für Ajax, Dom usw.). Wenn Sie also nur einen Formularserialisierer möchten, ist dieser übertrieben, und genau genommen, wenn Sie nur die Ajax-Funktionalität wünschen (für die ich ihn hauptsächlich verwendet habe), ist er übertrieben. Wenn Sie nicht vorsichtig sind, werden Sie möglicherweise feststellen, dass es etwas zu viel "Magie" bewirkt (wie das Erweitern jedes dom-Elements, das es berührt, mit Prototype JS-Funktionen, nur um Elemente zu finden), was es in extremen Fällen langsam macht.

Querystring kann helfen.

Also kannst du

const querystring = require('querystring')

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

Wenn Sie keine Bibliothek verwenden möchten, sollte dies die meisten / alle gleichen Formularelementtypen abdecken.

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('&');
}

Sie benötigen dazu kein Formular für Prototype. Verwenden Sie einfach die 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'

Sie können dies heutzutage mit FormDataund URLSearchParamsohne die Notwendigkeit tun, irgendetwas zu durchlaufen.

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

Ältere Browser benötigen jedoch eine Polyfüllung.

Ich bin mir selbst nicht ganz sicher, ich erinnere mich, dass jQuery dies bis zu einem gewissen Grad getan hat, aber es verarbeitet überhaupt keine hierarchischen Datensätze, geschweige denn auf PHP-freundliche Weise.

Eine Sache, die ich mit Sicherheit weiß, ist, dass Sie beim Erstellen von URLs und beim Einfügen des Produkts in den Dom nicht nur String-Kleber verwenden, da Sie sich sonst einem praktischen Seitenumbruch öffnen.

Zum Beispiel integriert bestimmte Werbesoftware die Versionszeichenfolge von dem, auf dem Ihr Flash ausgeführt wird. Dies ist in Ordnung, wenn es sich um eine generische einfache Zeichenfolge handelt, die jedoch sehr naiv ist und für Leute, die Gnash installiert haben, in einem peinlichen Durcheinander explodiert, da die Versionszeichenfolge von gnash zufällig eine vollständige GPL-Copyright-Lizenz mit URLs enthält und <a href> -Tags. Wenn Sie dies in Ihrem String-Glue-Advertiser-Generator verwenden, wird die Seite aufgeblasen und im Dom wird unausgeglichenes HTML angezeigt.

Die Moral der Geschichte:

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

Nicht:

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

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

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

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

Könnte ein bisschen überflüssig sein, aber der sauberste Weg, den ich gefunden habe, baut auf einigen der Antworten hier auf:

const params: {
   key1: 'value1',
   key2: 'value2',
   key3: 'value3',
}

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

return fetch('my-url', {
  method: 'POST',
  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
  body: query,
})

Quelle

Diese Antworten sind sehr hilfreich, aber ich möchte eine weitere Antwort hinzufügen, die Ihnen beim Erstellen einer vollständigen URL helfen kann. Dies kann Ihnen concat Basis helfen url, path, hashund parameters.

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

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

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);

Ich weiß, dass dies eine sehr späte Antwort ist, aber sehr gut funktioniert ...

var obj = {
a:"a",
b:"b"
}

Object.entries(obj).map(([key, val])=>`${key}=${val}`).join("&");

Hinweis: object.entries gibt Schlüssel- und Wertepaare zurück

Die Ausgabe von der obigen Zeile ist a = a & b = b

Hoffe es hilft jemandem.

Viel Spaß beim Codieren ...

Es ist wahrscheinlich zu spät, um Ihre Frage zu beantworten.
Ich hatte die gleiche Frage und wollte nicht immer wieder Zeichenfolgen anhängen, um eine URL zu erstellen. Also fing ich an, $ .param zu verwenden, wie Techhouse erklärte.
Ich habe auch eine URI.js- Bibliothek gefunden, die die URLs einfach für Sie erstellt. Es gibt mehrere Beispiele, die Ihnen helfen werden: 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"]);`