版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/autoXingJY/p/11596506.html

获取地址栏路径 : window.location

demo1 url拼接参数对象成新url

var linkObj = {

    "uid": 6666,

    "name": "lili",

    "sex": "male"

  }

  var endLink = createURL(url, linkObj);

  // 将一个对象拼接在url的后面:   createURL(url, linkObj)

  function createURL(url, param) {

    var urlLink = '';

    $.each(param, function (item, key) {

      var link = '&' + item + "=" + key;

      urlLink += link;

    })

    urlLink = url + "?" + urlLink.substr(1);

    return urlLink.replace(' ', '');

  }

  console.log("endLink", endLink);

demo2 url提取拼接的参数对象

 var jie = parseQueryString(urlStr);

  console.log("jie", jie);

  // {uid: "2222", name: "xiaoming", sex: "famale"}

  // 解析url 拿到所有参数对象 parseQueryString(urlStr);

  function parseQueryString(url) {

    var result = {};

    if (url.indexOf('?') > -1) {

      var str = url.split('?')[1];

      var temp = str.split('&');

      for (var i = 0; i < temp.length; i++) {

        var temp2 = temp[i].split('=');

        result[temp2[0]] = temp2[1];

      }

    }

    return result;

  }

demo3 从地址栏拿到指定参数

超方便的方法:  通过正则来从地址栏获取指定参数

 // GetQueryString("uid")

  function GetQueryString(name) {

    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");

    var r = window.location.search.substr(1).match(reg);

    if (r != null) return unescape(r[2]);

    return null;

  }

demo4  地址栏传输中文不在乱码

运行first.html, 将跳转到second.html页面,页面title显示"中文参数".

///first.html页面

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

</body>

<script type="text/javascript">

  /**

   * 这是第一个页面first.html

   * 说明: 1 页面first.html运行,跳转到页面second.html

   * 2 页面first.html跳转到页面second.html过程, 通过地址栏传参的方式传过去了encode了的 "中文参数"

   * 3 页面second.html通过地址栏解码 "中文参数",并展示在页面title上

   *

   */

  var cnWord = "中文参数";

  var encodeWord = encodeURI(encodeURI(cnWord)); // encode进行参数编码

  window.location.href = "second.html?cnWord=" + encodeWord;

</script>

///second.html页面

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

</head>

<body>

</body>

<script type="text/javascript">

  var encodeWord = getQueryString("cnWord"); //地址栏获取first.html页面传来的地址url,并decode解码

  var decodeWord = decodeURI(encodeWord); //decode转码

  document.getElementsByTagName("title")[0].innerHTML = decodeWord;

  //获取地址栏参数的方法

  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>

</html>

如果觉得文章对你有用, 请帮忙点个推荐和收藏 ! Thanks♪(･ω･)ﾉ

(超实用)前端地址栏保存&获取参数,地址栏传输中文不在乱码的更多相关文章

  1. jsp页面 直接从地址栏中 获取 参数的方法

    function GetQueryString(name) {      var reg = new RegExp("(^|&)"+ name +"=([^&am ...

  2. JSP基础知识➣获取参数和过滤器（四）

    JSP表单提交和参数获取 JSP表单提交的两种方式:post和get,通过这两种方式提交的参数到后台,获取参数的值主要由request来处理,获取值的方式有以下几种: getParameter():  ...

  3. js获取url地址栏参数

    前端开发中经常会遇到需要获取url地址栏参数问题 方法如下: function getQueryStringByName(name){ var src = "www.baidu.com?na ...

  4. js动态获取地址栏后的参数

    原文链接:https://blog.csdn.net/qq_37936542/article/details/78866651 需求:js动态的获取地址栏后面的参数 js代码: alert(GetQu ...

  5. JS分页 + 获取MVC地址栏URL路径的最后参数

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  6. 用JS获取地址栏中的参数的简易方法

    这个方法用起来超级简单,传入参数即可直接获取地址栏中的参数 代码如下 function GetQueryString(name) { var reg = new RegExp("(^|&am ...

  7. JavaScript获取地址栏中的参数

    JavaScript获取地址栏中的参数 1.获取地址栏中的参数 (1)若地址栏中的地址是: http://10.124.36.56:8080/CMOD/index.jsp?name=you&p ...

  8. javascript/jquery获取url地址栏参数的方法

    简洁jq方法获取url地址栏的参数 function getQueryVariable(variable){ var query = window.location.search.substring( ...

  9. js如何获取地址栏上的参数id

    直接上js代码   方法1: 父页面跳转地址栏带id>>>>window.location.href='${ctxAdmin}/study/checkForm?id='+id+ ...

随机推荐

  1. Spring Boot 教程系列学习

    Spring Boot基础教程1-Spring Tool Suite工具的安装 Spring Boot基础教程2-RESTful API简单项目的快速搭建 Spring Boot基础教程3-配置文件详 ...

  2. jsch连接sftp后连接未释放掉问题排查

    项目中通过jsch中的sftp实现上传下载文件.在压测过程中,由于调用到sftp,下载文件不存在时,系统不断抛出异常,内存飙升,逐渐把swap区也占满,通过top监控未发现占用内存的进程,通过查找ss ...

  3. windows mysql绿色版配置Mysql5.7.X

    MySQL绿色版安装,很简单按照下面的方式很快就可以实现了. 1.下载地址 https://dev.mysql.com/downloads/mysql/ 百度网盘链接:https://pan.baid ...

  4. 到底啥是鸭子类型（duck typing）带简单例子

    #百度百科鸭子类型定义 这是程序设计中的一种类型推断风格,这种风格适用于动态语言(比如PHP.Python.Ruby.Typescript.Perl.Objective-C.Lua.Julia.Jav ...

  5. Linux_CentOS用户管理 和 用户权限管理 chmod、ACL、 visudo

    一.用户管理 Linux 系统同时可以支持多个用户,每个用户对自己的文件设备有特殊的权利,能够保 证用户之间互不干扰.就像手机开了助手一样,同时登陆多个 qq 账号,当硬件配置非常高 时,每个用户还可 ...

  6. jsoup爬取某网站安全数据

    jsoup爬取某网站安全数据 package com.vfsd.net; import java.io.IOException; import java.sql.SQLException; impor ...

  7. Spring Cloud 如何使用Eureka注册服务 4.2.2

    要使用Eureka实现服务发现,需要项目中包含Eureka的服务端发现组件以及客户端发现组件. 搭建Maven父工程 创建一个Maven父工程xcservice-springcloud,并在工程的po ...

  8. Flink 实现指定时长或消息条数的触发器

    Flink 中窗口是很重要的一个功能,而窗口又经常配合触发器一起使用. Flink 自带的触发器大概有: CountTrigger: 指定条数触发 ContinuousEventTimeTrigger ...

  9. HTML布局水平导航条1制作

    该文是用css制作个导航条,用竖线分隔,导航条是点击的多个区块.步骤:ul里设置需要数量的li,li中加上a链接给ul加样式,去掉默认的前面的点给li设置左浮动,让ul里的li横向排列a链接设置成块状 ...

  10. kubernetes的几个概念

    1.  rc: 副本控制器,确保在任何时候都运行指定数量的pod副本.换句话说,ReplicationController确保一个pod或一组同构的pod始终处于可用状态. 2. rs:副本集,是rc ...