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参数及解决中文乱码问题相关推荐

  1. HttpServletRequest应用-获取请求参数及解决中文乱码

    一.介绍 在实际开发中,经常需要获取用户提交的表单数据,例如,用户名.密码.电子邮件等,为了方便获取表单中的请求参数,在HttpServletRequest接口的父类ServletRequest中,定 ...

  2. JS获取url多个参数及解决中文乱码问题

    JS获取url多个参数及解决中文乱码问题 参考文章: (1)JS获取url多个参数及解决中文乱码问题 (2)https://www.cnblogs.com/weimingxin/p/7349564.h ...

  3. js java base64,JavaScript BASE64算法实现(完美解决中文乱码)

    这篇文章主要介绍了JavaScript BASE64算法实现(完美解决中文乱码),先用escape()对中文进行编码.然后再进行base64编码. 解码时,再加入()对中文进行解码,这样就可以避免中文 ...

  4. 如何使用 Javascript 获取 URL 参数

    JS 获取 URL 参数稍微有点麻烦,因为 JS 只能获取到 URL 的某一部分,但是不能再细分.如果想获取某一项参数,那么还需要使用一下字符串截取. 所以分为两步: 获取 URL 的参数部分 截取某 ...

  5. 获取请求参数通用方式|| 中文乱码问题||请求转发

    1. 获取请求参数通用方式:不论get还是post请求方式都可以使用下列方法来获取请求参数 1. String getParameter(String name):根据参数名称获取参数值    use ...

  6. JavaScript获取URL参数

    文件1:realwall.js (function(window){var urltool = {getUrlParameterByKey : function(url,key){var result ...

  7. html获取url参数 php,如何使用JavaScript获取URL参数

    如果你希望通过JavaScript获取和使用URL参数.在JavaScript中,可以使用"document.location.search"获取URL的参数.但是,由于你只能在U ...

  8. 【转贴】利用 Javascript 获取 URL 参数(适合IE、FF)

    . ... .../test.html?str=123456 如何用Javascript接收类似上面的url参数呢?这个问题网上有很多答案,看了看,主要有两种,一个是利用字符串的截取,另一种是利用正则 ...

  9. Javascript 获取url参数,hash值 ,cookie

    /*** 获取请求参数* @param key* @returns {*}*/ function getRequestParameter(key){var params = getRequestPar ...

最新文章

  1. apache mysql 连接数_浏览器端同时请求100个url后,如何提升有效的msyql连接数
  2. Ecshop购物流程结算步骤 显示商品缩略图
  3. webservice入门程序学习中经验总结
  4. 13.SpringMVC核心技术-异常处理
  5. hash函数MurmurHash
  6. 关于js里的那一堆事件
  7. GoF设计模式——工厂模式(C++实现)
  8. SWMM源码编译LNK2001 无法解析的外部符号 _swmm_close@0
  9. 范浩强平衡树(FHQ_Treap)介绍
  10. 正态分布的概率密度函数 python_多元正态分布概率密度函数的三维绘图
  11. 浅析数据中心存储发展趋势
  12. swifty引用AFNetworking出现clang: error: linker command failed with exit code 1 (use -v to see invocation
  13. 10分钟就能完成别人半天的工作量,Word长文档排版技巧分享
  14. Unity 关于镜面反射和投影阴影实现
  15. 1-Scrapy Tutorial
  16. Tbase基础积累二之数据迁移工具dbbridge
  17. marvelous designer 10安装使用教程(附快捷键)
  18. 关于“车联网”的最强科普!
  19. 本地浏览器远程访问服务器tensorboard(MobaXterm)
  20. 牧牛区块链培训,区块链对社会生产的五大好处

热门文章

  1. 如何更改电脑桌面路径
  2. 抽象类和抽象方法的使用
  3. 运动无线蓝牙耳机哪个品牌好、蓝牙运动耳机排行榜10强
  4. 脉脉风格网名自动生成器
  5. 如何写一个相机APP的demo
  6. Android录制mp3格式
  7. Win10重置网络后,无法连接网络怎么恢复
  8. ETC银行卡怎么更换
  9. 2016/10/8 1001. 舞蹈室安排
  10. ffmpeg --安装及简单使用(转视频格式)