? ? ? ?移動(dòng)端微信項(xiàng)目中常常需要獲取某一頁(yè)面URL中的參數(shù),以便能進(jìn)行一系列的操作和設(shè)置。綜合最近項(xiàng)目中的實(shí)際場(chǎng)景和需要,在此總結(jié)一下如何獲取URL中拼接的參數(shù)以及中文亂碼問(wèn)題的解決。
? ? ? ?當(dāng)我們?cè)陧?yè)面之間利用get方式傳值時(shí),會(huì)作為參數(shù)直接拼接到頁(yè)面地址的后面,即以"key1=value1&key2=value2...“拼接在“?”的后面。到了目標(biāo)頁(yè)面之后,我們可以通過(guò)對(duì)URL進(jìn)行獲取,從而得到需要的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;
}
}
? ? ? ?例如,如果想要獲取頁(yè)面URL中拼接的userid這一key值對(duì)應(yīng)的value,就可以通過(guò)調(diào)用GetQueryString()這個(gè)函數(shù),并傳入此key值來(lái)獲得。
var userid_value = GetQueryString("userid");
? ? ? ?方法二:獲取頁(yè)面URL中拼接的參數(shù)并把所有參數(shù)放到一個(gè)對(duì)象中。
var getUrlObject = function(){
function parseQueryString(url){
var str = url.split("?")[1]; //通過(guò)?得到一個(gè)數(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;//獲取本頁(yè)面的URL,包括問(wèn)號(hào)后面拼接的部分
var data = new parseQueryString(url);
return data;
}
? ? ? ?最后通過(guò)調(diào)用函數(shù),即可得到一個(gè)URL中所有參數(shù)的對(duì)象集。
var params_array = getUrlObject();
? ? ? ?例如頁(yè)面url為http://www.test.com?name=wlm&gender=female,則此時(shí)
params_array = {
"name": "wlm",
"gender": "female"
}
? ? ? ?那么此時(shí)我們就可以通過(guò)params_array.name來(lái)獲取name這一key對(duì)應(yīng)的value值。
? ? ? ?最后說(shuō)一點(diǎn)很重要的東西,就是大家常常遇到的中文亂碼問(wèn)題。如果URL中參數(shù)的value值是中文,則不論使用上面哪種方法,獲取到的都是亂碼。那么如何解決中文亂碼問(wèn)題呢?
? ? ? ?因?yàn)闀r(shí)間緊迫,所以對(duì)參數(shù)的獲取和解析還是基于上面方法的原理,只不過(guò)需要利用一個(gè)最重要的東西,那就是decodeURI()。
? ? ? ?JavaScript decodeURI() 函數(shù)在W3School上的定義是這樣的:
定義和用法
decodeURI() 函數(shù)可對(duì) encodeURI() 函數(shù)編碼過(guò)的 URI 進(jìn)行解碼。
語(yǔ)法如下:
decodeURI(URIstring)
? ? ? ?其中URIstring是一個(gè)字符串,含有要解碼的 URI 或其他要解碼的文本,是必要參數(shù)。
? ? ? ?解決url中文亂碼問(wèn)題原理:我們首先對(duì)含有中文的整個(gè)url進(jìn)行解碼,得到可正常顯示的url字符串,然后再利用上述中的方法一或者方法二獲取想要的參數(shù)值。操作過(guò)程代碼如下:
var url = window.location.href;//得到頁(yè)面的url
var URL_decode = decodeURI(decodeURI(url));//對(duì)含有中文的url進(jìn)行解碼,注意是兩次解碼
//自定義獲取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日--注意:這里有個(gè)解密的操作。
}else{
return null;
}
}
/*
do something
/*以下為示例*/
//獲取班級(jí)名稱
var classname_val = GetQueryString_new("classname");
//頁(yè)面賦值展示
$(".classname").html(classname_val);
*/
? ? ? ?這樣就有效解決了令人頭痛的中文亂碼問(wèn)題。
? ? ? ?以上。
? ? ? ?2017年12月11日--對(duì)以上內(nèi)容的幾點(diǎn)補(bǔ)充說(shuō)明:
? ? ? ?在討論這個(gè)話題以前,首先需要明確的幾點(diǎn):1、URL的來(lái)源問(wèn)題;2、瀏覽器及服務(wù)器端對(duì)URL的編碼、解碼的方式及形式;3、頁(yè)面刷新與跳轉(zhuǎn)的區(qū)別。
? ? ? ?1、URL的來(lái)源分為三種:
? ? ? ?①直接通過(guò)瀏覽器打開(kāi)訪問(wèn);
? ? ? ?②通過(guò)ajax回調(diào)中服務(wù)器端返回的字段值(在后臺(tái)拼接好的url地址),直接做跳轉(zhuǎn)(location.href);
? ? ? ?③前端根據(jù)需求自己在頁(yè)面js腳本中的拼接url地址進(jìn)行跳轉(zhuǎn)。
? ? ? ?2、其中涉及到URL中文亂碼的問(wèn)題就是有兩大類:一是后臺(tái)拼接的url中文亂碼,一是前端js拼接的中文亂碼。而其對(duì)應(yīng)的就是服務(wù)器端和瀏覽器對(duì)URL的兩種編碼方式從而得到前端解碼的方式。
? ? ? ?3、下面來(lái)提出相對(duì)應(yīng)的解決方案。
? ? ? ?首先聲明:不論哪種情況,瀏覽器都會(huì)對(duì)跳轉(zhuǎn)的URL進(jìn)行一次編碼。
? ? ? ?1)ajax調(diào)用接口,從服務(wù)器端返回的數(shù)據(jù)中接收到的URL,是經(jīng)過(guò)兩次編碼的。一次是服務(wù)器端主動(dòng)encode,一次是瀏覽器對(duì)服務(wù)器端傳過(guò)來(lái)的URL進(jìn)行解析時(shí)又一次encode。所以前端要獲取從后端傳過(guò)來(lái)的URL中的中文,需要進(jìn)行兩次解碼操作:decodeURI(decodeURI("中文"));方法見(jiàn)上面整理。
? ? ? ?2)前端js腳本自己拼接URL進(jìn)行跳轉(zhuǎn)。在拼接時(shí)不進(jìn)行任何編碼操作,這樣在跳轉(zhuǎn)后,瀏覽器編碼一次,等再次在跳轉(zhuǎn)的頁(yè)面中去獲取URL中的中文參數(shù)時(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ù)。
? ? ? ?注:另外說(shuō)明一種情況--前端向服務(wù)器端傳輸?shù)恼?qǐng)求數(shù)據(jù)中有"含有中文參數(shù)的URL"或參數(shù)key對(duì)應(yīng)的value值是中文時(shí),此時(shí)前端js腳本中需要對(duì)此參數(shù)進(jìn)行兩次編碼encodeURI(encodeURI("中文")),或者對(duì)傳輸?shù)闹形牟蛔鋈魏尾僮?/strong>,像其他非中文值一樣正常傳輸,此時(shí)服務(wù)器端會(huì)通過(guò)設(shè)置編碼格式來(lái)解決中文亂碼問(wèn)題。 后端方法示例:
//params0是從前端獲取到的請(qǐng)求json數(shù)據(jù)
params0 = new String(params0.getBytes(SysConst.SERVER_DECODE_CHARSET),"UTF-8");
? ? ? ?4、頁(yè)面刷新和頁(yè)面跳轉(zhuǎn)的區(qū)別。
? ? ? ?頁(yè)面刷新和頁(yè)面跳轉(zhuǎn),聽(tīng)起來(lái)很簡(jiǎn)單,但是其機(jī)理不同,而且對(duì)cookie的存儲(chǔ)效果也不同。由于涉及到其他內(nèi)容,(瀏覽器事件監(jiān)聽(tīng)等),所以這一點(diǎn)單獨(dú)在另外一篇文章中詳述。