js解決url傳遞中文參數(shù)亂碼問(wèn)題的方法詳解
場(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'
總結(jié)
到此這篇關(guān)于js解決url傳遞中文參數(shù)亂碼問(wèn)題的方法的文章就介紹到這了,更多相關(guān)js url傳遞中文參數(shù)亂碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)炫目的色相球動(dòng)畫(huà)效果實(shí)例
這篇文章主要介紹了JS基于HTML5的canvas標(biāo)簽實(shí)現(xiàn)色相球效果,結(jié)合實(shí)例形式分析了基于canvas標(biāo)簽實(shí)現(xiàn)圖形繪制的相關(guān)操作技巧,需要的朋友可以參考下2016-08-08Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jsp+javascript打造級(jí)連菜單的實(shí)例代碼
jsp+javascript打造級(jí)連菜單的實(shí)例代碼,需要的朋友可以參考一下2013-06-06JS如何將數(shù)字類型轉(zhuǎn)化為沒(méi)3個(gè)一個(gè)逗號(hào)的金錢(qián)格式
本文為大家介紹下如何將數(shù)字類型轉(zhuǎn)化為沒(méi)3個(gè)一個(gè)逗號(hào)的金錢(qián)格式,下面是具體的實(shí)現(xiàn)2014-01-01一文詳解JavaScript如何安全的進(jìn)行數(shù)據(jù)獲取
這篇文章主要為大家介紹了JavaScript如何安全的進(jìn)行數(shù)據(jù)獲取方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03一個(gè)js導(dǎo)致的jquery失效問(wèn)題的解決方法
這篇文章主要介紹了一個(gè)js導(dǎo)致的jquery失效問(wèn)題的解決方法,有需要的朋友可以參考一下2013-11-11fileupload控件 文件類型客戶端驗(yàn)證實(shí)現(xiàn)代碼
客戶端JS驗(yàn)證fileupload控件,設(shè)置只允許特定的文件類型 ,當(dāng)然服務(wù)器端更要判斷啊。這里是為了后臺(tái)驗(yàn)證的更順利。2009-11-11javascript中關(guān)于類型判斷的一些疑惑小結(jié)
這篇文章主要給大家介紹了關(guān)于javascript中關(guān)于類型判斷的一些疑惑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-10-10javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型
這篇文章主要給大家分享一段javascript實(shí)現(xiàn)獲取瀏覽器版本、操作系統(tǒng)類型的封裝好的代碼,使用非常方便,也很實(shí)用,推薦給大家。2015-01-01js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)盒子滾動(dòng)動(dòng)畫(huà)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08