只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数,例如:“var1=value&var2=value2&arr[]=foo&arr[]=bar…”

我已经想了很多年了。


当前回答

正如Stein所说,您可以使用http://www.prototypejs.org中的原型javascript库。 包括JS,这很简单,$('formName').serialize()将返回你想要的!

其他回答

不,我认为标准JavaScript没有内置这个功能,但Prototype JS有这个功能(当然大多数其他JS框架也有,但我不知道它们),他们称之为序列化。

I can reccomend Prototype JS, it works quite okay. The only drawback I've really noticed it it's size (a few hundred kb) and scope (lots of code for ajax, dom, etc.). Thus if you only want a form serializer it's overkill, and strictly speaking if you only want it's Ajax functionality (wich is mainly what I used it for) it's overkill. Unless you're careful you may find that it does a little too much "magic" (like extending every dom element it touches with Prototype JS functions just to find elements) making it slow on extreme cases.

UrlSearchParams API是一个很好的建议,但我不敢相信没有人提到非常有用的.get和.set方法。它们可以用于操作查询字符串,不仅非常容易使用,还可以解决您可能遇到的许多问题。例如,在我的例子中,我想构建一个没有重复键的查询字符串。.set为您解决了这个问题。引用MDN文档:

URLSearchParams.set () 将与给定搜索参数关联的值设置为给定值。如果有多个值,则删除其他值。

示例(来自MDN):

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

// Add a third parameter
params.set('baz', 3);

params.toString(); // "foo=1&bar=2&baz=3"

另一种更短的语法:

let url = new URL('https://example.com?foo=1&bar=2');

// Add a third parameter
url.searchParams.set('baz', 3);

url.searchParams.toString(); // "foo=1&bar=2&baz=3"

这些答案是非常有用的,但我想添加另一个答案,这可能会帮助你建立完整的URL。 这可以帮助你连接基本url,路径,哈希和参数。

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-url下载

演示:

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

Querystring可以提供帮助。

所以,你可以

const querystring = require('querystring')

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

现在你可以用FormData和URLSearchParams做到这一点,而不需要循环任何东西。

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

不过,旧的浏览器将需要一个填充。