(超實用)前端地址欄保存&獲取參數,地址欄傳輸中文不在亂碼

本文轉載自查看原文 2019-09-27 11:27 316 原生JavaScript

版權聲明：本文為博主原創文章，遵循 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♪(･ω･)ﾉ

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 兩個HTML地址欄傳中文參數亂碼地址欄url中文亂碼問題 JS獲取地址欄參數的方法 js獲取地址欄中的參數 php 獲取地址欄參數 js如何獲取地址欄上的參數id 用JS獲取地址欄參數的方法（超級簡單）獲取地址欄URL中參數, getQuerySting()方法 javascript/jquery獲取地址欄url參數的方法 vue獲取瀏覽器地址欄參數