Como construir consulta string com Javascript

Question

Basta saber se há built-in nada para Javascript que pode levar um formulário e retornar os parâmetros de consulta, por exemplo: "var1 = value & var2 = valor2 & arr [] = foo & arr [] = bar ..."

Eu estive pensando isso há anos.

Answer 1

Eu tentei procurar uma resposta para essa pergunta algum tempo atrás, mas acabei escrevendo minha própria função que os extratos os valores do formulário ..

não é perfeito, mas ele se encaixa as minhas necessidades.

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 retorna um (key -> Valor) mapeamento dos parâmetros. a entrada é o elemento de formulário (Elemento DOM)

Ele não controla campos que permitem a seleção múltipla.

Answer 2

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

Para navegadores que não suportam arrow sintaxe da função que requer ES5, altere a linha .map... para

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

Answer 3

Se você estiver usando jQuery que você pode querer verificar para fora jQuery.param() http: //api.jquery. com / jQuery.param /

Exemplo:

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

Answer 4

Esta não responder diretamente sua pergunta, mas aqui está uma função genérica que irá criar um URL que contém consulta parâmetros de cadeia. Os parâmetros (nomes e valores) são escaparam com segurança para inclusão em um URL.

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

Existem hoje APIs para esta, especificamente o URLSearchParams API . Para o exemplo dado:

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

Nota: É muito compatível com Chrome e Firefox estes dias, mas tenha cuidado se você precisa trabalhar com os navegadores Microsoft e da Apple desde a compatibilidade é parcial.

Answer 6

Com jQuery você pode fazer isso por $.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)

Fazendo uso de Object.entries() , que devolve um conjunto de pares [key, value] do objecto. Por exemplo, para {a: 1, b: 2} ele retornaria [['a', 1], ['b', 2]]. Não é suportado (e não será) apenas pelo IE.

Código:

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

Exemplo:

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

Resultado:

"name=John&gender=male"

Answer 8

Não, eu não acho padrão JavaScript tem que embutido, mas Prototype JS tem essa função (certamente estruturas mais outros JS tem também, mas eu não conhecê-los), que eles chamam de serialize .

Eu posso recomendo Prototype JS, ele funciona muito bem. O único inconveniente que eu realmente notado o seu tamanho (algumas centenas de kb) e de escopo (lotes de código para ajax, dom, etc.). Assim, se você quer apenas uma forma serializer é um exagero, e estritamente falando, se você só quer a sua funcionalidade Ajax (wich é principalmente o que eu usei para) é um exagero. A menos que você for cuidadoso você pode achar que ele faz um pouco demais "mágica" (como estendendo-se cada elemento DOM que toca com funções Prototype JS apenas para encontrar elementos) tornando-se lento em casos extremos.

Answer 9

querystring pode ajudar.

Assim, você pode

const querystring = require('querystring')

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

Answer 10

Se você não quiser usar uma biblioteca, esta deve cobrir a maior parte / todos os tipos de mesmo elemento do formulário.

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

Você não precisa realmente uma forma de fazer isso com Prototype. Basta usar Object.toQueryString função :

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

Eu não sou inteiramente certo mim, eu lembro de ver jQuery fez isso até certo ponto, mas não lidar com registros hierárquicos em tudo, muito menos de uma forma php amigável.

Uma coisa que eu sei com certeza, é quando a construção de URLs e furando o produto para o dom, não basta usar corda-cola para fazê-lo, ou você estará abrindo-se para uma página disjuntor calhar.

Por exemplo, um determinado software de publicidade in-linhas a cadeia de versão de qualquer corre o flash. Isso é bom quando seus adobes cordas genérico simples, mas no entanto, que é muito ingênuo, e explode em uma confusão embaraçoso para as pessoas a quem tenha instalado Gnash, como cadeia de versão gnash'es passa a conter licenças GPL direitos autorais soprado completa, com URLs e . Usando esta em seu gerador anunciante corda-cola, resulta na página de sopro aberto e ter HTML desequilibrada transformando-se no dom.

A moral da história:

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

Não:

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

_{Google necessidade de aprender este truque. Tentei relatar o problema, eles não parecem cuidado.}

Answer 13

Como Stein diz, você pode usar a biblioteca javascript protótipo de http://www.prototypejs.org . Incluir o JS e é muito simples, então, $('formName').serialize() irá retornar o que você quer!

Answer 14

Para aqueles de nós que preferem jQuery, você usaria a forma plugin: http: // plugins. jquery.com/project/form , que contém um método formSerialize.

Answer 15

Você pode fazer isso hoje em dia com FormData e URLSearchParams sem a necessidade de varrer nada.

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

Navegadores mais antigos vai precisar de um polyfill, no entanto.

Answer 16

Estas respostas são muito úteis, mas eu quero adicionar outra resposta, que podem ajudá-lo a construir URL completa. Isso pode ajudar você concat url base, path, hash e parameters.

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

Você pode baixar via npm https://www.npmjs.com/package/build- url

Demonstração:

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

é é provavelmente tarde demais para responder a sua pergunta.
Eu tive a mesma pergunta e eu não gostava de manter anexando cordas para criar uma URL. Então, eu comecei usando $ .param como techhouse explicou.
Eu também achei um href="http://medialize.github.io/URI.js/" rel="nofollow noreferrer"> URI.js biblioteca que cria as URLs facilmente para você. Há vários exemplos que o ajudarão a:. URI.js Documentação
Aqui é um deles:

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>