快捷導(dǎo)航

js解決url傳遞中文參數(shù)亂碼問(wèn)題的方法詳解

更新時(shí)間：2023年05月08日 15:09:12 作者：不愛(ài)吃糖的程序媛

前后臺(tái)用js傳參過(guò)程中,如果是中文就容易出現(xiàn)亂碼,下面這篇文章主要給大家介紹了關(guān)于js解決url傳遞中文參數(shù)亂碼問(wèn)題的的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

場(chǎng)景復(fù)現(xiàn)：

做后臺(tái)管理系統(tǒng)的時(shí)候，出現(xiàn)了一個(gè)bug:點(diǎn)擊“導(dǎo)出數(shù)據(jù)”按鈕，打開(kāi)文件里面是空的。

亂碼的url

正確的url

bug解決思路：

1.文件為空，應(yīng)該是請(qǐng)求的url路徑不對(duì)，顯示一個(gè)空的模板即沒(méi)帶參數(shù)，因此可以判斷是參數(shù)有誤；

2.控制臺(tái)打出url,可以看出是參數(shù)中文亂碼；

3.怎樣解決中文亂碼問(wèn)題？（大坑就在這里）

當(dāng)時(shí)我嘗試了encodeURI 和 decodeURI，以及encodeURIComponent 和 decodeURIComponent方法都沒(méi)用(一般情況下都是有效果的)，后來(lái)就是在導(dǎo)出數(shù)據(jù)接口那里打印{key}、{form[key]}分別是啥，然后得出undefined,后來(lái)我嘗試加了一個(gè)value，沒(méi)想到就可以了。

思路糾錯(cuò)：

我之前一直在對(duì)比這個(gè)頁(yè)面的導(dǎo)出接口，和其他頁(yè)面的導(dǎo)出接口是否寫(xiě)的一樣？結(jié)果是一樣的，而沒(méi)有去思考它這里具體的值要的是什么，因此挺花費(fèi)時(shí)間的。

url傳參中文亂碼的解決方法

1、escape 和 unescape

escape()不能直接用于URL編碼，它的真正作用是返回一個(gè)字符的Unicode編碼值。

采用unicode字符集對(duì)指定的字符串除0-255以外進(jìn)行編碼。所有的空格符、標(biāo)點(diǎn)符號(hào)、特殊字符以及更多有聯(lián)系非ASCII字符都將被轉(zhuǎn)化成%xx格式的字符編碼（xx等于該字符在字符集表里面的編碼的16進(jìn)制數(shù)字）。比如，空格符對(duì)應(yīng)的編碼是%20。
escape不編碼字符有69個(gè)：*，+，-，.，/，@，_，0-9，a-z，A-Z。

escape()函數(shù)用于js對(duì)字符串進(jìn)行編碼，不常用。

//跳轉(zhuǎn)頁(yè)
location.href = './test.html?'+escape('name=張三&age=18')
//接收頁(yè)
var str = unescape(location.search.substr(1));
//url顯示
'test.html?name%3D%u5F20%u4E09%26age%3D18'

2、encodeURI 和 decodeURI

把URI字符串采用UTF-8編碼格式轉(zhuǎn)化成escape各式的字符串。

encodeURI不編碼字符有82個(gè)：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z

encodeURI()用于整個(gè)url編碼。

//跳轉(zhuǎn)頁(yè)
location.href = encodeURI('./test.html?name=張三&age=18');
//接收頁(yè)
var str = decodeURI(location.search.substr(1));
//url顯示
'test.html?name=張三&age=18'

3、encodeURIComponent 和 decodeURIComponent

與encodeURI()的不同的是，“; / ? : @ & = + $ , #”，這些在encodeURI()中不被編碼的符號(hào)，在encodeURIComponent()中統(tǒng)統(tǒng)會(huì)被編碼。至于具體的編碼方法，兩者是一樣。把URI字符串采用UTF-8編碼格式轉(zhuǎn)化成escape格式的字符串。

//跳轉(zhuǎn)頁(yè)
location.href = './test.html?'+encodeURIComponent('name=張三&age=18');
//接收頁(yè)
var str = decodeURIComponent(location.search.substr(1));
//url顯示
'test.html?name%3D張三%26age%3D18'