JavaScript 获取url参数及解决中文乱码问题
1.获取url参数
方法一:
// 获取url参数function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return pair[1];}}return false;}
方法二:
function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return r[2];return null;}
直接调用函数并传递参数名即可
注意:前面方法尚未对中文进行处理,如果传递的值是中文,会产生乱码
2.解决中文乱码
方法一:encodeURI()、decodeURI()
方法二:escape()、unescape()
我们可以对中文单独加密,也可以对整个url加密
3.一个简单的例子
test1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test1</title>
</head>
<body><div><div>点击按钮将名字参数name="罗辑",性别参数gender="男"传递到test2.html</div> <div>name使用encodeURI加密,gender使用escape加密</div><button onclick="jump()">跳转</button></div><script>let name = "罗辑"let gender = "男"function jump() {name = encodeURI(name)gender = escape(gender)let url = `file:///G:/workspace/test/test2.html?name=${name}&gender=${gender}`window.location.href = url}</script>
</body>
</html>
test2.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test2</title>
</head><body><div><div>我是test2.html我接收到的数据</div><div id="name"></div><div id="gender"></div></div><script>window.onload = function () {let url = window.location.hrefdocument.getElementById('name').innerText = `name = ${getQueryVariable('name')}`document.getElementById('gender').innerText = `gender = ${getQueryString('gender')}`}// 获取url参数function getQueryVariable(variable) {var query = window.location.search.substring(1);var vars = query.split("&");for (var i = 0; i < vars.length; i++) {var pair = vars[i].split("=");if (pair[0] == variable) {return decodeURI(pair[1]); // 解密方法}}return false;}// 获取url参数function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]); // 解密方法return null;}</script>
</body></html>
用encodeURI()加密name,在getQueryVariable()使用decodeURI()解密
用escape()加密gender,在getQueryString()使用unescape()解密
JavaScript 获取url参数及解决中文乱码问题相关推荐
- HttpServletRequest应用-获取请求参数及解决中文乱码
一.介绍 在实际开发中,经常需要获取用户提交的表单数据,例如,用户名.密码.电子邮件等,为了方便获取表单中的请求参数,在HttpServletRequest接口的父类ServletRequest中,定 ...
- JS获取url多个参数及解决中文乱码问题
JS获取url多个参数及解决中文乱码问题 参考文章: (1)JS获取url多个参数及解决中文乱码问题 (2)https://www.cnblogs.com/weimingxin/p/7349564.h ...
- js java base64,JavaScript BASE64算法实现(完美解决中文乱码)
这篇文章主要介绍了JavaScript BASE64算法实现(完美解决中文乱码),先用escape()对中文进行编码.然后再进行base64编码. 解码时,再加入()对中文进行解码,这样就可以避免中文 ...
- 如何使用 Javascript 获取 URL 参数
JS 获取 URL 参数稍微有点麻烦,因为 JS 只能获取到 URL 的某一部分,但是不能再细分.如果想获取某一项参数,那么还需要使用一下字符串截取. 所以分为两步: 获取 URL 的参数部分 截取某 ...
- 获取请求参数通用方式|| 中文乱码问题||请求转发
1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数 1. String getParameter(String name):根据参数名称获取参数值 use ...
- JavaScript获取URL参数
文件1:realwall.js (function(window){var urltool = {getUrlParameterByKey : function(url,key){var result ...
- html获取url参数 php,如何使用JavaScript获取URL参数
如果你希望通过JavaScript获取和使用URL参数.在JavaScript中,可以使用"document.location.search"获取URL的参数.但是,由于你只能在U ...
- 【转贴】利用 Javascript 获取 URL 参数(适合IE、FF)
. ... .../test.html?str=123456 如何用Javascript接收类似上面的url参数呢?这个问题网上有很多答案,看了看,主要有两种,一个是利用字符串的截取,另一种是利用正则 ...
- Javascript 获取url参数,hash值 ,cookie
/*** 获取请求参数* @param key* @returns {*}*/ function getRequestParameter(key){var params = getRequestPar ...
最新文章
- apache mysql 连接数_浏览器端同时请求100个url后,如何提升有效的msyql连接数
- Ecshop购物流程结算步骤 显示商品缩略图
- webservice入门程序学习中经验总结
- 13.SpringMVC核心技术-异常处理
- hash函数MurmurHash
- 关于js里的那一堆事件
- GoF设计模式——工厂模式(C++实现)
- SWMM源码编译LNK2001 无法解析的外部符号 _swmm_close@0
- 范浩强平衡树(FHQ_Treap)介绍
- 正态分布的概率密度函数 python_多元正态分布概率密度函数的三维绘图
- 浅析数据中心存储发展趋势
- swifty引用AFNetworking出现clang: error: linker command failed with exit code 1 (use -v to see invocation
- 10分钟就能完成别人半天的工作量,Word长文档排版技巧分享
- Unity 关于镜面反射和投影阴影实现
- 1-Scrapy Tutorial
- Tbase基础积累二之数据迁移工具dbbridge
- marvelous designer 10安装使用教程(附快捷键)
- 关于“车联网”的最强科普!
- 本地浏览器远程访问服务器tensorboard(MobaXterm)
- 牧牛区块链培训,区块链对社会生产的五大好处