前端get请求传多个参数顺序用法介绍

在前端开发中，我们常常需要利用 GET 请求向服务器端传递多个参数。本文将从多个方面详细阐述前端 GET 请求传多个参数顺序。

一、参数的传递方式

传递多个参数时，有两种常用方式：query string 和 URL rewriting。

1、query string

query string 是通过在 URL 中以 ? 开头，& 分割多个参数的方式传递参数，例如：

http://www.example.com/search?key=JavaScript&page=2

上述 URL 中的 key 和 page 参数分别为 JavaScript 和 2。

2、URL rewriting

URL rewriting 是通过改变 URL 的路径来传递参数，例如：

http://www.example.com/product/123

上述 URL 中的 123 为 product 页面的 ID。

需要注意的是，URL rewriting 需要服务端的支持。在客户端同样可以使用 AngularJS 的路由模块 ui-router 实现前端路由。

二、参数的顺序

在 GET 请求中，参数的顺序并不影响请求结果：

http://www.example.com/search?key=JavaScript&page=2

http://www.example.com/search?page=2&key=JavaScript

上述两个 URL 的请求结果相同。

三、参数的编码

为了避免参数中包含特殊字符导致请求失败，我们需要对参数进行编码。

1、使用 encodeURI 或 encodeURIComponent

encodeURI 对整个 URL 进行编码，除了特殊字符 ; , / ? : @ & = + $ #，例如：

http://www.example.com/search?key=JavaScript&book=Professional JavaScript for Web Developers

使用 encodeURI 的结果为：

http://www.example.com/search?key=JavaScript&book=Professional%20JavaScript%20for%20Web%20Developers

encodeURIComponent 则对参数中的特殊字符进行编码，例如：

http://www.example.com/search?key=JavaScript&book=Professional JavaScript for Web Developers?

使用 encodeURIComponent 的结果为：

http://www.example.com/search?key=JavaScript&book=Professional%20JavaScript%20for%20Web%20Developers%3F

2、使用 jQuery 的 $.param

jQuery 的 $.param 可以将 JavaScript 对象转换为 query string 序列，例如：

var data = { key: "JavaScript", book: "Professional JavaScript for Web Developers" };
var queryString = $.param(data);

最终结果为：

key=JavaScript&book=Professional%20JavaScript%20for%20Web%20Developers

四、参数的数量

GET 请求传递参数数量没有具体限制，但是应该考虑到 URL 的长度限制。一般来说，浏览器的 URL 长度限制为 2048 个字符。

五、完整示例代码

1、使用 query string 传递参数

HTML 代码：

<form method="get" action="http://www.example.com/search">
  <input type="text" name="key" value="" />
  <input type="text" name="page" value="1" />
  <button type="submit">搜索</button>
</form>

JavaScript 代码：

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  var key = form.querySelector('[name="key"]').value;
  var page = form.querySelector('[name="page"]').value;
  var url = 'http://www.example.com/search?key=' + encodeURIComponent(key) + '&page=' + encodeURIComponent(page);
  window.location.href = url;
  event.preventDefault();
});

2、使用 URL rewriting 传递参数

HTML 代码：

<a href="http://www.example.com/product/123">产品详情</a>

JavaScript 代码：

var productId = 123;
var url = 'http://www.example.com/product/' + encodeURIComponent(productId);
window.location.href = url;