如何使用jQuery携带变量与数组值实现URL重定向

要在重定向时传递name、id这类单个变量，以及数组值，最常用的方式是通过**URL查询参数（GET方式）**传递，下面是具体实现方案：

方案一：用jQuery的$.param()自动构建参数（推荐） #

$.param()方法可以自动将对象（包含数组）转换为URL编码的查询字符串，无需手动拼接，还能处理特殊字符编码问题，是最省心的方式。

修改后的完整代码：

<html> 
<head> 
    <title>redirect to another page</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script> 
        // 定义要传递的变量和数组
        var name = "Sam";
        var id = 5;
        var hobbies = ["reading", "coding", "hiking"];

        $(document).ready(function() {
            // 1. 把所有参数打包成一个对象
            var paramObj = {
                name: name,
                id: id,
                hobbies: hobbies
            };

            // 2. 将对象转为URL查询字符串
            // 默认会给数组参数加[]（如hobbies[]=reading），如果后端不需要[]，可以加第二个参数true：$.param(paramObj, true)
            var queryStr = $.param(paramObj);

            // 3. 拼接完整的重定向URL
            var baseUrl = "microsoft-edge:http://test-dev/test.jsp";
            var fullUrl = baseUrl + "?" + queryStr;

            // 4. 执行重定向
            $(location).attr('href', fullUrl); 
        }); 
    </script> 
</body>
</html>

方案二：手动拼接参数（无jQuery依赖时可用） #

如果不想依赖$.param()，可以手动拼接参数，但必须用encodeURIComponent()对参数值编码，避免特殊字符（空格、中文等）导致的URL解析错误：

<html> 
<head> 
    <title>redirect to another page</title>
</head>
<body>
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script> 
        var name = "Sam";
        var id = 5;
        var hobbies = ["reading", "coding", "hiking"];

        $(document).ready(function() {
            // 1. 手动拼接单个参数
            var queryStr = "name=" + encodeURIComponent(name) + "&id=" + encodeURIComponent(id);

            // 2. 循环拼接数组参数
            hobbies.forEach(function(item) {
                queryStr += "&hobbies=" + encodeURIComponent(item);
            });

            // 3. 拼接完整URL并跳转
            var baseUrl = "microsoft-edge:http://test-dev/test.jsp";
            var fullUrl = baseUrl + "?" + queryStr;
            $(location).attr('href', fullUrl); 
        }); 
    </script> 
</body>
</html>

后端接收说明 #

• 单个参数：直接通过对应语言的GET参数获取方法即可，比如Java用request.getParameter("name")，PHP用$_GET['name']。
• 数组参数：如果是hobbies=reading&hobbies=coding格式，Java用request.getParameterValues("hobbies")，PHP用$_GET['hobbies']（会自动转为数组）；如果是hobbies[]=reading格式，PHP直接用$_GET['hobbies']，Java仍用getParameterValues。

内容的提问来源于stack exchange，提问作者Sam