blocks|key|1682160|text|不，我不认为标准的JavaScript内置了这个功能，但Prototype+JS有这个功能(当然大多数其他JS框架也有这个功能，但我不知道他们)，他们称之为serialize。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1682161|我可以推荐Prototype+JS，它工作得很好。我真正注意到的唯一缺点是它的大小(几百kb)和范围(+ajax、dom等的大量代码)。因此，如果你只想要一个表单序列化程序，那就大材小用了；严格地说，如果你只想要它的Ajax功能(这也是我使用它的主要目的)，那就大材小用了。除非你很小心，否则你可能会发现它有点太“神奇”了(比如用原型JS函数扩展它触及的每个dom元素，只是为了找到元素)，这在极端情况下会让它变得很慢。|1682162|entityMap|0|LINK|mutability|MUTABLE|url|http://www.prototypejs.org/api/form/serialize^0|26|9|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

<p>No, I don't think standard JavaScript has that built in, but Prototype JS has that function (surely most other JS frameworks have too, but I don't know them), they call it <a href="http://www.prototypejs.org/api/form/serialize" rel="noreferrer">serialize</a>. </p>

<p>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.</p>


blocks|key|1682214|text|正如Stein所说，您可以使用http://www.prototypejs.org的prototype+javascript库。包含JS就很简单了，$('formName').serialize()会返回你想要的东西！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1682215|entityMap|0|LINK|mutability|MUTABLE|url|http://www.prototypejs.org/^0|22|P|F|Q|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<p>As Stein says, you can use the prototype javascript library from <a href="http://www.prototypejs.org" rel="nofollow noreferrer">http://www.prototypejs.org</a>.
Include the JS and it is very simple then, <code>$('formName').serialize()</code> will return what you want!</p>


blocks|key|1682258|text|如果你不想使用库，这应该涵盖大多数/所有相同的表单元素类型。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1682259|function+serialize(form)+{
++if+(!form+%7C%7C+!form.elements)+return;

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

++var+elems+=+form.elements;
++for+(i+=+0;+i+<+elems.length;+i+%2B=+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+%2B=+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('&');
}|code-block|syntax|javascript|1682260|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you don't want to use a library, this should cover most/all of the same form element types.</p>

<pre><code>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 &lt; elems.length; i += 1, first = false) {
    if (elems[i].name.length &gt; 0) { /* don't include unnamed elements */
      switch (elems[i].type) {
        case 'select-one': first = true;
        case 'select-multiple':
          for (j = 0; j &lt; 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('&amp;');
}
</code></pre>


blocks|key|1466949|text|对于我们这些喜欢jQuery的人来说，您可以使用表单插件：http://plugins.jquery.com/project/form，它包含一个formSerialize方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1466950|entityMap|0|LINK|mutability|MUTABLE|url|http://plugins.jquery.com/project/form^0|T|12|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>For those of us who prefer jQuery, you would use the form plugin: <a href="http://plugins.jquery.com/project/form" rel="nofollow noreferrer">http://plugins.jquery.com/project/form</a>, which contains a formSerialize method.</p>


blocks|key|1467002|text|你实际上不需要一个表单就能用Prototype做到这一点。只需使用Object.toQueryString+function即可|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1467003|Object.toQueryString({+action:+'ship',+order_id:+123,+fees:+['f1',+'f2'],+'label':+'a+demo'+})

//+->+'action=ship&order_id=123&fees=f1&fees=f2&label=a%2520demo'|code-block|syntax|javascript|1467004|entityMap|0|LINK|mutability|MUTABLE|url|http://www.prototypejs.org/api/object/toquerystring^0|X|T|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You don't actually need a form to do this with Prototype. Just use <a href="http://www.prototypejs.org/api/object/toquerystring" rel="nofollow noreferrer">Object.toQueryString function</a>:</p>

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

// -&gt; 'action=ship&amp;order_id=123&amp;fees=f1&amp;fees=f2&amp;label=a%20demo'
</code></pre>


blocks|key|1467064|text|这并不能直接回答您的问题，但这里有一个泛型函数，它将创建一个包含查询字符串参数的URL。参数(名称和值)被安全地转义以包含在URL中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1467065|function+buildUrl(url,+parameters){
++var+qs+=+"";
++for(var+key+in+parameters)+{
++++var+value+=+parameters[key];
++++qs+%2B=+encodeURIComponent(key)+%2B+"="+%2B+encodeURIComponent(value)+%2B+"&";
++}
++if+(qs.length+>+0){
++++qs+=+qs.substring(0,+qs.length-1);+//chop+off+last+"&"
++++url+=+url+%2B+"?"+%2B+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%2520Washington&dob=17320222|code-block|syntax|javascript|1467066|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This doesn't directly answer your question, but here's a generic function which will create a URL that contains query string parameters.  The parameters (names and values) are safely escaped for inclusion in a URL.</p>

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

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

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

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


blocks|key|1467115|text|如果您使用的是jQuery，则可能需要查看jQuery.param()+http://api.jquery.com/jQuery.param/|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1467116|示例：|1467117|var+params+=+{
++++parameter1:+'value1',
++++parameter2:+'value2',
++++parameter3:+'value3'+
};
var+query+=+$.param(params);
console.log(query);|code-block|syntax|javascript|1467118|这将打印出来：|1467119|parameter1=value1&parameter2=value2&parameter3=value3|1467120|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.param/^0|L|E|10|Z|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>If you're using jQuery you might want to check out <code>jQuery.param()</code> <a href="http://api.jquery.com/jQuery.param/" rel="nofollow noreferrer">http://api.jquery.com/jQuery.param/</a></p>
<p>Example:</p>
<pre><code>var params = {
    parameter1: 'value1',
    parameter2: 'value2',
    parameter3: 'value3' 
};
var query = $.param(params);
console.log(query);
</code></pre>
<p>This will print out:</p>
<pre><code>parameter1=value1&amp;parameter2=value2&amp;parameter3=value3
</code></pre>


blocks|key|1682500|text|使用jQuery，您可以通过$.param完成此操作|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1682501|$.param({+action:+'ship',+order_id:+123,+fees:+['f1',+'f2'],+'label':+'a+demo'+})

//+->+"action=ship&order_id=123&fees%255B%255D=f1&fees%255B%255D=f2&label=a%2Bdemo"|code-block|syntax|javascript|1682502|entityMap^0|E|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>With jQuery you can do this by <code>$.param</code></p>

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

// -&gt; "action=ship&amp;order_id=123&amp;fees%5B%5D=f1&amp;fees%5B%5D=f2&amp;label=a+demo"
</code></pre>


blocks|key|1682556|text|回答你的问题可能太晚了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1682557|我也有同样的问题，我不喜欢一直附加字符串来创建URL。因此，正如techhouse解释的那样，我开始使用$.param。|offset|length|1682558|我还发现了一个URI.js库，它可以很容易地为您创建URL。有几个示例将对您有所帮助：URI.js+Documentation。|1682559|以下是其中之一：|1682560|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"]);`|code-block|syntax|javascript|1682561|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1040452/techouse|1|http://medialize.github.io/URI.js/|2|http://medialize.github.io/URI.js/docs.html^0|0|W|9|0|0|7|6|1|17|K|2|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@$D|16|E|17|1|18]|$D|19|E|1A|1|1B]]|A|$]]|$1|H|3|I|5|6|7|1C|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1D|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|X]]|Y|$5|R|S|T|A|$U|Z]]]]

<p>Is is probably too late to answer your question. <br/>
I had the same question and I didn't like to keep appending strings to create a URL. So, I started using $.param as <a href="https://stackoverflow.com/users/1040452/techouse">techhouse</a> explained. <br/>
I also found a <a href="http://medialize.github.io/URI.js/" rel="nofollow noreferrer">URI.js</a> library that creates the URLs easily for you. There are several examples that will help you: <a href="http://medialize.github.io/URI.js/docs.html" rel="nofollow noreferrer">URI.js Documentation</a>.<br/>
Here is one of them:</p>

<pre><code>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&amp;foo=bar&amp;goodbye=world&amp;goodbye=mars"

uri.setSearch("goodbye", "sun");
// uri == "?hello=mars&amp;foo=bar&amp;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"]);`
</code></pre>


blocks|key|1682595|text|querystring可以提供帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1682596|因此，您可以|1682597|const+querystring+=+require('querystring')

url+%2B=+'?'+%2B+querystring.stringify(parameters)|code-block|syntax|javascript|1682598|entityMap|0|LINK|mutability|MUTABLE|url|https://nodejs.org/api/querystring.html^0|0|B|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p><a href="https://nodejs.org/api/querystring.html" rel="noreferrer">querystring</a> can help.</p>

<p>So, you can</p>

<pre><code>const querystring = require('querystring')

url += '?' + querystring.stringify(parameters)
</code></pre>


blocks|key|1467296|text|The+URLSearchParams+API在所有现代浏览器中都可用。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1467297|​|1467298|const+params+=+new+URLSearchParams({
++var1:+"value",
++var2:+"value2",
++arr:+"foo",
});
console.log(params.toString());
//Prints+"var1=value&var2=value2&arr=foo"|code-block|syntax|javascript|1467299|1467300|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams^0|0|N|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Y|8|@]|9|@]|C|$I|J]]|$1|K|3|E|5|6|7|Z|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]]]

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams" rel="noreferrer">The URLSearchParams API</a> is available in all modern browsers. For example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const params = new URLSearchParams({
  var1: "value",
  var2: "value2",
  arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&amp;var2=value2&amp;arr=foo"</code></pre>
</div>
</div>
</p>


blocks|key|1682654|text|ES2017+(ES8)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1682655|使用Object.entries()，它返回对象的[key,+value]对的数组。例如，对于{a:+1,+b:+2}，它将返回[['a',+1],+['b',+2]]。只有IE不支持(也不会支持)它。|offset|length|style|CODE|1682656|代码：|1682657|const+buildURLQuery+=+obj+=>
++++++Object.entries(obj)
++++++++++++.map(pair+=>+pair.map(encodeURIComponent).join('='))
++++++++++++.join('&');|code-block|syntax|javascript|1682658|示例：|1682659|buildURLQuery({name:+'John',+gender:+'male'});|1682660|结果：|1682661|"name=John&gender=male"|1682662|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries^0|0|2|G|P|C|1B|C|1S|K|2|G|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@$D|16|E|17|F|G]|$D|18|E|19|F|G]|$D|1A|E|1B|F|G]|$D|1C|E|1D|F|G]]|9|@$D|1E|E|1F|1|1G]]|A|$]]|$1|H|3|I|5|6|7|1H|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1K|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1L|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1M|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]]]

<h2>ES2017 (ES8)</h2>

<p>Making use of <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries" rel="noreferrer"><code>Object.entries()</code></a>, which returns an array of object's <code>[key, value]</code> pairs. For example, for <code>{a: 1, b: 2}</code> it would return <code>[['a', 1], ['b', 2]]</code>. It is not supported (and won't be) only by IE.</p>

<h3>Code:</h3>

<pre><code>const buildURLQuery = obj =&gt;
      Object.entries(obj)
            .map(pair =&gt; pair.map(encodeURIComponent).join('='))
            .join('&amp;');
</code></pre>

<h3>Example:</h3>

<pre><code>buildURLQuery({name: 'John', gender: 'male'});
</code></pre>

<h3>Result:</h3>

<pre><code>"name=John&amp;gender=male"
</code></pre>


blocks|key|1682692|text|现在你可以用FormData和URLSearchParams做到这一点，而不需要遍历任何东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1682693|const+formData+=+new+FormData(form);
const+searchParams+=+new+URLSearchParams(formData);
const+queryString+=+searchParams.toString();|code-block|syntax|javascript|1682694|不过，较旧的浏览器将需要polyfill。|1682695|entityMap^0|6|8|F|F|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>You can do that nowadays with <code>FormData</code> and <code>URLSearchParams</code> without the need to loop over anything.</p>

<pre><code>const formData = new FormData(form);
const searchParams = new URLSearchParams(formData);
const queryString = searchParams.toString();
</code></pre>

<p>Older browsers will need a polyfill, though.</p>


blocks|key|1467446|text|这些答案非常有帮助，但我想添加另一个答案，这可能会帮助您建立完整的URL。这可以帮助你连接基本的url，path，hash和parameters。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1467447|var+url+=+buildUrl('http://mywebsite.com',+{
++++++++path:+'about',
++++++++hash:+'contact',
++++++++queryParams:+{
++++++++++++'var1':+'value',
++++++++++++'var2':+'value2',
++++++++++++'arr[]'+:+'foo'
++++++++}
++++});
++++console.log(url);|code-block|syntax|javascript|1467448|您可以通过npm+https://www.npmjs.com/package/build-url下载|1467449|演示：|1467450|​|1467451|;(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+%2B=+localVar;
++++++++++}+else+{
++++++++++++builtUrl+%2B=+'/'+%2B+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%2B%2B)+{
++++++++++++++++encodedParam+=+encodeURIComponent(String(options.queryParams[key][i]).trim());
++++++++++++++++queryString.push(key+%2B+'='+%2B+encodedParam);
++++++++++++++}
++++++++++++}+else+{++++++++++++++
++++++++++++++if+(caseChange)+{
++++++++++++++++encodedParam+=+encodeURIComponent(String(options.queryParams[key]).trim().toLowerCase());
++++++++++++++}
++++++++++++++else+{
++++++++++++++++encodedParam+=+encodeURIComponent(String(options.queryParams[key]).trim());
++++++++++++++}
++++++++++++++queryString.push(key+%2B+'='+%2B+encodedParam);
++++++++++++}
++++++++++}
++++++++}
++++++++builtUrl+%2B=+'?'+%2B+queryString.join('&');
++++++}

++++++if+(options.hash)+{
++++++++if(caseChange)
++++++++++++builtUrl+%2B=+'#'+%2B+String(options.hash).trim().toLowerCase();
++++++++else
++++++++++++builtUrl+%2B=+'#'+%2B+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);|1467452|1467453|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/build-url^0|1C|3|1G|4|1L|4|1Q|A|0|0|9|13|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|M|3|N|5|6|7|1F|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|S|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>These answers are very helpful, but i want to add another answer, that may help you build full URL. 
This can help you concat base <code>url</code>, <code>path</code>, <code>hash</code> and <code>parameters</code>.</p>

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

<p>You can download via npm <a href="https://www.npmjs.com/package/build-url" rel="nofollow noreferrer">https://www.npmjs.com/package/build-url</a></p>

<p>Demo:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>;(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 &amp;&amp; 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 &amp;&amp; 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) &amp;&amp; options.queryParams[key] !== void 0) {
            var encodedParam;
            if (options.disableCSV &amp;&amp; Array.isArray(options.queryParams[key]) &amp;&amp; options.queryParams[key].length) {
              for(var i = 0; i &lt; 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('&amp;');
      }

      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' &amp;&amp; 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);</code></pre>
</div>
</div>
</p>


blocks|key|1467483|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1467484|var+params+=+{+width:1680,+height:1050+};
var+str+=+jQuery.param(+params+);

console.log(str)|code-block|syntax|javascript|1467485|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>|1467486|1467487|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var params = { width:1680, height:1050 };
var str = jQuery.param( params );

console.log(str)</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1467525|text|可能有点多余，但我发现的最干净的方法是基于这里的一些答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1467526|const+params:+{
+++key1:+'value1',
+++key2:+'value2',
+++key3:+'value3',
}

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

return+fetch('my-url',+{
++method:+'POST',
++headers:+{'Content-Type':+'application/x-www-form-urlencoded'},
++body:+query,
})|code-block|syntax|javascript|1467527|Source|offset|length|1467528|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/github/fetch/issues/256#issuecomment-241613757^0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Might be a bit redundant but the cleanest way i found which builds on some of the answers here:</p>

<pre><code>const params: {
   key1: 'value1',
   key2: 'value2',
   key3: 'value3',
}

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

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

<p><a href="https://github.com/github/fetch/issues/256#issuecomment-241613757" rel="noreferrer">Source</a></p>


blocks|key|1682853|text|创建一个URL对象并将值追加到seachParameters|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1682854|let+stringUrl+=+"http://www.google.com/search";
let+url+=+new+URL(stringUrl);
let+params+=+url.searchParams;
params.append("q",+"This+is+seach+query");

console.log(url.toString());|code-block|syntax|javascript|1682855|输出将是|1682856|http://www.google.com/search?q=This%2Bis%2Bseach%2Bquery|1682857|entityMap^0|4|3|F|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>Create an <code>URL</code> object and append the values to <code>seachParameters</code></p>
<pre><code>let stringUrl = &quot;http://www.google.com/search&quot;;
let url = new URL(stringUrl);
let params = url.searchParams;
params.append(&quot;q&quot;, &quot;This is seach query&quot;);

console.log(url.toString());
</code></pre>
<p>The output will be</p>
<pre><code>http://www.google.com/search?q=This+is+seach+query
</code></pre>


<p>Just wondering if there is anything built-in to Javascript that can take a Form and return the query parameters, eg: <code>"var1=value&amp;var2=value2&amp;arr[]=foo&amp;arr[]=bar..."</code></p>

<p>I've been wondering this for years.</p>


How to build query string with Javascript

jQuery

我只是想知道Javascript中是否有内置的东西可以接受表单并返回查询参数，例如："var1=value&var2=value2&arr[]=foo&arr[]=bar..."我多年来一直在想这件事。

问如何使用Javascript构建查询字符串
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript构建查询字符串EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript构建查询字符串
EN