如何建立query string with Javascript

StackOverflow https://stackoverflow.com/questions/316781

  •  11-07-2019
  •  | 
  •  

题

只是想知道如果有任何内在的Javascript，可以采取的形式和回返查询参数，例如："var1=价值和var2=值2&arr[]=foo&arr[]=的酒吧..."

我一直在想这个多年。

有帮助吗？

解决方案

我试图寻找一个答案，这个问题的一些前一段时间，但最后我写我自己的函数，从表单中提取值..

它并不完美，但它适合我的需要。

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返回（键 - >值）的参数的映射。 输入是表单元素（DOM元素）

它不处理字段，允许多个选择。

其他提示

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

对于不支持箭头函数的语法要求ES5浏览器，改变.map...行

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

如果您正在使用jQuery你可能想看看jQuery.param() HTTP：//api.jquery。 COM / jQuery.param /

示例：

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

这并不直接回答你的问题，但这里的，这将创建一个包含查询字符串参数的URL的通用功能。的参数（名称和值）被安全转义用于包含在一个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

使用jQuery的，你可以通过$.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）

利用 Object.entries() 的，它返回对象的[key, value]对阵列。例如，对于{a: 1, b: 2}它将返回[['a', 1], ['b', 2]]。它不仅支持IE（并不会）。

代码：

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

实施例

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

结果：

"name=John&gender=male"

没有，我不认为标准的JavaScript已经是内置的，但原型JS有功能（当然大多数其他JS框架有过，但我不认识他们），他们称之为的序列。

我可以reccomend原型JS，它的工作原理相当不错。我有唯一的缺点真正注意到了它的大小（几百KB）和范围（大量的AJAX，DOM代码等）。因此，如果你只想要一个形式串行这是矫枉过正，而且严格来说，如果你只希望它的Ajax功能（至极主要是什么我用了），这是矫枉过正。除非你小心你可能会发现，它确实有点太“神奇”（如扩展它与原型JS功能倒是每个DOM元素只是为了找到元素）使得它在极端的情况下放缓。

查询字符串可以提供帮助。

所以，你可以

const querystring = require('querystring')

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

如果你不想使用一个库，这应该涵盖大部分/所有相同的表单元素类型。

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

您实际上并不需要一个形式原型做到这一点。只是使用 Object.toQueryString功能：

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'

我不完全是些我自己，我记得看到jQuery做到的程度，但它不处理层次记录在所有让我们单独在一php友好的方式。

有一件事我知道肯定的，是在建立网址，并坚持的产品进入dom，不只是使用的字符串-胶水做到这一点，否则你会被开自己一个方便的网页断路器。

例如，某一广告软件的在线版本串无论从任何运行你的闪光灯。这是好的时，其坯通用的简单的文字，但是但是，这是非常幼稚的，并打击在一种难堪的烂摊子的人已安装咬牙切齿，咬牙切'es版串发生在含有一个完全成熟的GPL许可证版权的许可证，完成与网址和 <a href=""> 标签。使用这个在你的串-胶水广告商发生器，结果在页吹开放和具有不平衡HTML现在dom中。

道德的故事： 

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

不： 

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

谷歌需要学习这一招。我试着报告的问题，他们似乎不关心。

由于斯坦说，你可以使用原型来自 http://www.prototypejs.org javascript库。 包括JS，这是很简单的话，$('formName').serialize()会回到你想要的！

对于我们这些谁喜欢jQuery的，你可以使用表格插件：的http：//插件。 jquery.com/project/form ，该含有formSerialize方法。

您可以做到这一点时下FormData和URLSearchParams不超过任何需要循环。

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

旧的浏览器将需要一个填充工具，虽然。

这些答案是非常有帮助的，但我想添加另一种答案，可以帮助您构建完整的URL。 这可以帮助您Concat的基础url，path，hash和parameters。

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

您可以通过NPM https://www.npmjs.com/package/build-下载网址

演示：

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

时可能来不及回答你的问题。点击 我有同样的问题，我不喜欢不断追加字符串创建一个URL。于是，我开始使用$ .PARAM作为 techhouse 解释。点击 我还发现了一个 URI.js ，可以轻松地为您创建的URL库。有几个例子，可以帮助你： URI.js文档
这里是其中之一：

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"]);`


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>

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top