js解決url傳遞中文參數(shù)亂碼問題的方法詳解
場(chǎng)景復(fù)現(xiàn):
做后臺(tái)管理系統(tǒng)的時(shí)候,出現(xiàn)了一個(gè)bug:點(diǎn)擊“導(dǎo)出數(shù)據(jù)”按鈕,打開文件里面是空的。

亂碼的url

正確的url

bug解決思路:
1.文件為空,應(yīng)該是請(qǐng)求的url路徑不對(duì),顯示一個(gè)空的模板即沒帶參數(shù),因此可以判斷是參數(shù)有誤;
2.控制臺(tái)打出url,可以看出是參數(shù)中文亂碼;
3.怎樣解決中文亂碼問題?(大坑就在這里)
當(dāng)時(shí)我嘗試了encodeURI 和 decodeURI,以及encodeURIComponent 和 decodeURIComponent方法都沒用(一般情況下都是有效果的),后來就是在導(dǎo)出數(shù)據(jù)接口那里打印{key}、{form[key]}分別是啥,然后得出undefined,后來我嘗試加了一個(gè)value,沒想到就可以了。


思路糾錯(cuò):
我之前一直在對(duì)比這個(gè)頁面的導(dǎo)出接口,和其他頁面的導(dǎo)出接口是否寫的一樣?結(jié)果是一樣的,而沒有去思考它這里具體的值要的是什么,因此挺花費(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)頁
location.href = './test.html?'+escape('name=張三&age=18')
//接收頁
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)頁
location.href = encodeURI('./test.html?name=張三&age=18');
//接收頁
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)頁
location.href = './test.html?'+encodeURIComponent('name=張三&age=18');
//接收頁
var str = decodeURIComponent(location.search.substr(1));
//url顯示
'test.html?name%3D張三%26age%3D18'總結(jié)
到此這篇關(guān)于js解決url傳遞中文參數(shù)亂碼問題的方法的文章就介紹到這了,更多相關(guān)js url傳遞中文參數(shù)亂碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript鏈?zhǔn)秸{(diào)用原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript鏈?zhǔn)秸{(diào)用,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript鏈?zhǔn)秸{(diào)用基本原理、實(shí)現(xiàn)方法與相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)的示例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)可拖動(dòng)懸浮圖標(biāo)的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
JavaScript對(duì)IE操作的經(jīng)典代碼(推薦)
本篇文章主要是對(duì)JavaScript對(duì)IE操作的經(jīng)典代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-03-03
js實(shí)現(xiàn)各種復(fù)制到剪貼板的方法(分享)
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)各種復(fù)制到剪貼板的方法(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例
javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例代碼。2009-11-11
JavaScript實(shí)現(xiàn)網(wǎng)頁加載進(jìn)度條代碼超簡單
網(wǎng)頁進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁的加載進(jìn)度情況,loading進(jìn)度條可用動(dòng)畫的形式從開始0%到100%完成網(wǎng)頁加載這一過程。代碼簡單易懂,效果非常好,需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
JS使用getComputedStyle()方法獲取CSS屬性值
經(jīng)常會(huì)用到j(luò)s來獲取元素的CSS樣式,由于方法眾多,在下面的文章中為大家詳細(xì)整理下2014-04-04

