JavaScript對頁面URL及拼接參數(shù)的獲取、設(shè)置以及中文亂碼問題的解決

? ? ? ?移動端微信項目中常常需要獲取某一頁面URL中的參數(shù),以便能進行一系列的操作和設(shè)置。綜合最近項目中的實際場景和需要,在此總結(jié)一下如何獲取URL中拼接的參數(shù)以及中文亂碼問題的解決。
? ? ? ?當我們在頁面之間利用get方式傳值時,會作為參數(shù)直接拼接到頁面地址的后面,即以"key1=value1&key2=value2...“拼接在“?”的后面。到了目標頁面之后,我們可以通過對URL進行獲取,從而得到需要的key值。
? ? ? ?方法一:如果想要獲取URL中拼接的某一特定參數(shù)的值,可以采用如下方法

function GetQueryString(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null){
         return  unescape(r[2]);
     }else{
         return null;
     }
}

? ? ? ?例如,如果想要獲取頁面URL中拼接的userid這一key值對應(yīng)的value,就可以通過調(diào)用GetQueryString()這個函數(shù),并傳入此key值來獲得。

var userid_value = GetQueryString("userid");

? ? ? ?方法二:獲取頁面URL中拼接的參數(shù)并把所有參數(shù)放到一個對象中。

var getUrlObject = function(){
    function parseQueryString(url){
        var str = url.split("?")[1];   //通過?得到一個數(shù)組,取?后面的參數(shù)
        var items = str.split("&");    //分割成數(shù)組
        var arr,name,value;

        for(var i=0; i<items.length; i++){
            arr = items[i].split("=");    //["key0", "0"]
            name = arr[0];
            value = arr[1];
            this[name] = value;
        }
    }
    var url = window.location.href;//獲取本頁面的URL,包括問號后面拼接的部分
    var data = new parseQueryString(url);
    return data;
}

? ? ? ?最后通過調(diào)用函數(shù),即可得到一個URL中所有參數(shù)的對象集。

var params_array = getUrlObject();

? ? ? ?例如頁面url為http://www.test.com?name=wlm&gender=female,則此時

params_array = {
     "name": "wlm",
     "gender": "female"
}

? ? ? ?那么此時我們就可以通過params_array.name來獲取name這一key對應(yīng)的value值。
? ? ? ?最后說一點很重要的東西,就是大家常常遇到的中文亂碼問題。如果URL中參數(shù)的value值是中文,則不論使用上面哪種方法,獲取到的都是亂碼。那么如何解決中文亂碼問題呢?
? ? ? ?因為時間緊迫,所以對參數(shù)的獲取和解析還是基于上面方法的原理,只不過需要利用一個最重要的東西,那就是decodeURI()。
? ? ? ?JavaScript decodeURI() 函數(shù)在W3School上的定義是這樣的:

定義和用法
decodeURI() 函數(shù)可對 encodeURI() 函數(shù)編碼過的 URI 進行解碼。

語法如下:

decodeURI(URIstring)

? ? ? ?其中URIstring是一個字符串,含有要解碼的 URI 或其他要解碼的文本,是必要參數(shù)。
? ? ? ?解決url中文亂碼問題原理:我們首先對含有中文的整個url進行解碼,得到可正常顯示的url字符串,然后再利用上述中的方法一或者方法二獲取想要的參數(shù)值。操作過程代碼如下:

    var url = window.location.href;//得到頁面的url
    var URL_decode = decodeURI(decodeURI(url));//對含有中文的url進行解碼,注意是兩次解碼
    //自定義獲取URL中某一參數(shù)的封裝函數(shù)
    function GetQueryString_new(key){
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = URL_decode.substr(1).match(reg);//注意這里使用的是解碼之后的URL_decode
         if(r!=null){
             return  unescape(r[2]);//2017年12月11日--注意:這里有個解密的操作。
         }else{
             return null;
         }
    }
    /*
       do something
       /*以下為示例*/
       //獲取班級名稱
       var classname_val = GetQueryString_new("classname");
       //頁面賦值展示
       $(".classname").html(classname_val);
    */

? ? ? ?這樣就有效解決了令人頭痛的中文亂碼問題。
? ? ? ?以上。
? ? ? ?2017年12月11日--對以上內(nèi)容的幾點補充說明:
? ? ? ?在討論這個話題以前,首先需要明確的幾點:1、URL的來源問題;2、瀏覽器及服務(wù)器端對URL的編碼、解碼的方式及形式;3、頁面刷新與跳轉(zhuǎn)的區(qū)別。
? ? ? ?1、URL的來源分為三種:
? ? ? ?①直接通過瀏覽器打開訪問;
? ? ? ?②通過ajax回調(diào)中服務(wù)器端返回的字段值(在后臺拼接好的url地址),直接做跳轉(zhuǎn)(location.href);
? ? ? ?③前端根據(jù)需求自己在頁面js腳本中的拼接url地址進行跳轉(zhuǎn)。
? ? ? ?2、其中涉及到URL中文亂碼的問題就是有兩大類:一是后臺拼接的url中文亂碼,一是前端js拼接的中文亂碼。而其對應(yīng)的就是服務(wù)器端和瀏覽器對URL的兩種編碼方式從而得到前端解碼的方式。
? ? ? ?3、下面來提出相對應(yīng)的解決方案。
? ? ? ?首先聲明:不論哪種情況,瀏覽器都會對跳轉(zhuǎn)的URL進行一次編碼。
? ? ? ?1)ajax調(diào)用接口,從服務(wù)器端返回的數(shù)據(jù)中接收到的URL,是經(jīng)過兩次編碼的。一次是服務(wù)器端主動encode,一次是瀏覽器對服務(wù)器端傳過來的URL進行解析時又一次encode。所以前端要獲取從后端傳過來的URL中的中文,需要進行兩次解碼操作:decodeURI(decodeURI("中文"));方法見上面整理。
? ? ? ?2)前端js腳本自己拼接URL進行跳轉(zhuǎn)。在拼接時不進行任何編碼操作,這樣在跳轉(zhuǎn)后,瀏覽器編碼一次,等再次在跳轉(zhuǎn)的頁面中去獲取URL中的中文參數(shù)時,就直接解碼一次即可。方法如下:

function GetQueryString_new(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);//注意這行
    if(r!=null){
        return  decodeURI(r[2]);//解碼一次
    }else{
        return null;
    }
}       
//獲取用戶名
var username_val =  GetQueryString_new("username");//直接獲取某一值為中文的參數(shù)。

? ? ? ?注:另外說明一種情況--前端向服務(wù)器端傳輸?shù)恼埱髷?shù)據(jù)中有"含有中文參數(shù)的URL"或參數(shù)key對應(yīng)的value值是中文時,此時前端js腳本中需要對此參數(shù)進行兩次編碼encodeURI(encodeURI("中文")),或者對傳輸?shù)闹形牟蛔鋈魏尾僮?/strong>,像其他非中文值一樣正常傳輸,此時服務(wù)器端會通過設(shè)置編碼格式來解決中文亂碼問題。 后端方法示例:

//params0是從前端獲取到的請求json數(shù)據(jù)
params0 = new String(params0.getBytes(SysConst.SERVER_DECODE_CHARSET),"UTF-8");

? ? ? ?4、頁面刷新和頁面跳轉(zhuǎn)的區(qū)別。
? ? ? ?頁面刷新和頁面跳轉(zhuǎn),聽起來很簡單,但是其機理不同,而且對cookie的存儲效果也不同。由于涉及到其他內(nèi)容,(瀏覽器事件監(jiān)聽等),所以這一點單獨在另外一篇文章中詳述。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,967評論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,273評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,870評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,742評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,527評論 6 407
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,010評論 1 322
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,108評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,250評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,769評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 40,656評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,853評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,371評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,103評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,472評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,717評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,487評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,815評論 2 372

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,781評論 18 139
  • 最近一個項目,測試時采用的Windows下的Tomcat服務(wù)器,上傳中文文件正常;部署時用到了Linux服務(wù)器,上...
    Jackeroo閱讀 4,413評論 1 3
  • 講故事,不愛看別看,看完嘰歪拉黑。 ...... ...... ...... 我覺得我不該信他。 1 已婚育有三子...
    妖眼君閱讀 636評論 2 3
  • 服務(wù)于外企15年,從事服務(wù)管理和質(zhì)量管理咨詢顧問工作,擅長企業(yè)IT服務(wù)流程設(shè)計及業(yè)務(wù)流程優(yōu)化,西格瑪黑帶。同時,致...
    愚佩閱讀 546評論 0 0