解决window.location.href参数太长

本文介绍了一种解决URL参数过长导致的问题的方法,利用隐藏的表单进行POST请求代替GET请求,有效避免了参数长度限制,提高了安全性。

前言:一提到页面跳转,最常用的一般就是window.location.href,如果需要带参数,也许可以在后面用?拼上,但这样并不安全,而且有个更严重的问题,这样的拼接是有长度限制的,如果达到好几千个字符,比如传个base64???这时你会发现浏览器报错了,直接不能传参了。

需求:解决window.location.href参数过长的问题

思路:我们再想想别的解决方案,我们知道post请求是没有参数长度限制的,而且还是比较安全的。post请求的方式第一能想到的肯定是ajax,但是可惜的是ajax好像不能跳转,但是不要忘记还有一种也能设置成post请求的,那就是表单了。那么这样我们就可以试试创建一个隐藏的表单,通过提交表单的方式来跳转。

方案

post('******.do',{"username":p1,"userId":p2,"userCode":p3,"imgUrl":imgUrl});

function post(url, params) { 
    // 创建form元素
    var temp_form = document.createElement("form");
    // 设置form属性
    temp_form .action = url;      
    temp_form .target = "_self";
    temp_form .method = "post";      
    temp_form .style.display = "none";
    // 处理需要传递的参数 
    for (var x in params) { 
        var opt = document.createElement("textarea");      
        opt.name = x;      
        opt.value = params[x];      
        temp_form .appendChild(opt);      
    }      
    document.body.appendChild(temp_form);
    // 提交表单      
    temp_form .submit();     
} 

可以看到,这里相当于做了一个隐藏的一次性使用的表单,该表单的提交方式是post,这样就完美的解决了参数过长的问题。

转载于:https://www.cnblogs.com/Kingram/p/10044583.html

<think> 我们正在讨论的是在hash路由模式下,如何通过window.location.href来获取参数。 在hash路由中,URL的结构通常为:http://example.com/#/path?param1=value1&param2=value2 由于参数是位于hash部分(#后面)的,因此直接使用window.location.search是无法获取到参数的,因为window.location.search获取的是问号(?)后面的部分,不包括hash部分。 所以,我们需要从window.location.hash中解析参数。 步骤如下: 1. 获取hash部分,即window.location.hash。 2. 从hash字符串中提取出查询参数部分(即问号后面的部分)。 3. 解析查询参数字符串,将其转换为参数对象。 注意:hash部分可能包含路由路径和查询参数,例如"#/path?param1=value1&param2=value2"。 我们可以这样处理: - 首先,将hash字符串按问号分割成两部分:第一部分是路由路径,第二部分是查询字符串。 - 如果没有问号,则说明没有参数。 - 如果有问号,则取第二部分,然后使用URLSearchParams来解析,或者自己用split解析。 示例代码: ```javascript // 获取完整的hash字符串,包括'#' const hash = window.location.hash; // 分割hash字符串,找到问号的位置 // 例如:hash = "#/path?param1=value1&param2=value2" // 我们想要获取问号后面的部分,即"param1=value1&param2=value2" // 方法:使用split('#')? 不需要,因为hash已经是以'#'开头的字符串。 // 直接查找hash字符串中的'?'字符 const indexOfQuestionMark = hash.indexOf('?'); if (indexOfQuestionMark !== -1) { // 截取问号后面的字符串 const queryString = hash.substring(indexOfQuestionMark + 1); // 使用URLSearchParams解析查询字符串 const params = new URLSearchParams(queryString); // 现在可以通过params.get('param1')来获取值 // 如果需要将参数转换为对象,可以遍历URLSearchParams const paramsObj = {}; for (const [key, value] of params) { paramsObj[key] = value; } console.log(paramsObj); } else { console.log('没有参数'); } ``` 另外,如果hash部分没有路径,只有参数,比如"#?param1=value1",这种情况也是可能的,但我们上面的方法同样适用。 注意:在hash路由中,有时参数也可能直接放在路径后面而没有问号,但这种情况不符合标准查询字符串格式,所以通常我们使用问号来分隔。 因此,在标准的hash路由中,使用上述方法可以获取参数。 另外,如果使用前端路由库(如Vue Router的hash模式、React Router的hash路由等),它们通常提供了获取参数的API,但这里我们讨论的是直接使用原生JavaScript获取。 总结:在hash路由中,使用window.location.href无法直接获取参数,因为参数在hash部分。我们需要使用window.location.hash,然后手动解析查询字符串。 相关问题: 1. 什么是hash路由?它和history路由有什么区别? 2. 除了使用URLSearchParams,还有哪些方法可以解析查询字符串? 3. 在hash路由中,如何监听参数的变化? </think> 在 hash 路由模式下,使用 `window.location.href` 无法直接获取 URL 参数,因为参数通常存储在 hash 部分(`#` 之后)。以下是正确获取参数的几种方法: ### 方法 1:解析 `window.location.hash` ```javascript // 示例 URL: http://site.com/#/path?name=John&age=30 // 获取完整 hash(包含路径和参数) const hash = window.location.hash; // 返回 "#/path?name=John&age=30" // 提取参数部分 const queryString = hash.split('?')[1]; // 得到 "name=John&age=30" // 将参数转为对象 const params = new URLSearchParams(queryString); const name = params.get('name'); // "John" const age = params.get('age'); // "30" ``` ### 方法 2:正则表达式解析 ```javascript function getHashParams() { const hash = window.location.hash; const params = {}; // 匹配 hash 中的参数(兼容无?的情况) const regex = /[?&]([^=#&]+)=([^&#]*)/g; let match; while ((match = regex.exec(hash)) !== null) { params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]); } return params; } // 使用示例 const params = getHashParams(); console.log(params.name); // "John" ``` ### ⚠️ 注意事项 1. **为什么 `window.location.search` 无效** 在 hash 路由中,URL 参数位于 `#` 符号之后(如 `#/path?param=value`),而 `location.search` 只能获取 `?` 后的查询字符串。 2. **参数位置示例** 标准 URL 结构: `https://domain.com/path?search=value#/hash-route?hash-param=value` - `location.search` → `?search=value` - `location.hash` → `#/hash-route?hash-param=value` 3. **监听参数变化** 使用 `hashchange` 事件响应参数变化: ```javascript window.addEventListener('hashchange', () => { console.log(getHashParams()); // 获取最新参数 }); ``` ### 替代方案建议 如果使用前端框架: - **React**:通过 `react-router` 的 `useParams()`/`useLocation()`[^1] - **Vue**:通过 `this.$route.query`(Vue 2)或 `useRoute().query`(Vue 3)[^2] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值