URL傳參數致使亂碼

今天在經過jsp給後端傳參過程當中，發現後臺接收的是亂碼。花了兩個小時，終於解決了，如今記錄一下。

背景

如今有一個jsp頁面，裏面主要的內容是表格，其中表格中的每一行最後一列是操做部分，點擊能夠對該行進行修改或刪除。

如上圖，點擊"修改"會將左邊的參數傳給後臺。"配電主類型"和"配電副類型"兩列看着是文字，實際上傳的是數字；參數類型這一項不參與上傳；"參數編碼"和"參數名稱"兩項是文字，除此以外，還有一個uuid會傳給後臺。以下圖所示：

在瀏覽器的地址欄上顯示了我所上傳的內容：

paraId就是前面提到的uuid；devMainType和devSubType對應配電主類型和配電副類型；paraCode和paraName兩項是本文關注的重點，即前面提到的參數編碼和參數名稱。

問題

在提交了URL以後，會把這些參數傳給後臺代碼，後臺代碼將轉到另外一個前端jsp頁面，將傳的參數顯示出來。在這裏，後臺代碼只負責中轉，並未對上傳參數做處理。可是在顯示頁面中卻出了問題：

（由於其它幾項是正常的，就沒有截圖）原本是中文的參數編碼和參數名稱都已經亂掉了。

思路

回想整個過程，前端jsp（代號A）獲取表格某行中的數據，而後將這些數據傳給瀏覽器（代號B），B將參數傳給後臺C。

• 首先，保證A到B，參數沒有亂。

　　經過對參數加console.log()，發現傳的是中文，check.

• 其次，檢查C接收的是仍是亂碼。若是不是亂碼，說明是C的緣由致使最後顯示有問題；若是已是亂碼，說明是B到C的過程出現了問題。

　　對後臺加斷點，發如今接收的時候，就已是亂碼了。

結論：B應該背鍋。

檢查瀏覽器

從新看一下A傳數據B的時候發生了什麼。打開Chrome Developer Tool

把URL部分放大：

能夠發現，paraCode和paraName兩項已經變成了%E6%B5%8B等字樣。。。。

上面這張圖的第一行右邊還有"view parsed"，點開看一下：

沒錯，解析出來的確實是我傳的。然而被瀏覽器編碼成了這樣子：

如今已經能夠確定，瀏覽器對我URL裏面的中文作了某種格式的編碼，就變成了%E6%B5...這個樣子。那是哪一種格式的編碼呢？經過站長工具一個一個的試，最後發現是URL編碼。

解決

既然瀏覽器會對中文編碼，那傳給瀏覽器時不要包含中文不就行了嘛。但A取到的表格中的數據就是中文怎麼辦呢？能夠在A裏就對這些中文進行編碼，編碼後的結果就是%E6%B5%8B%E8%AF%95了，這時候瀏覽器就不會再對它加編碼了。

步驟

在A中，對paraCode和paraName加兩次encodeURI()

在C中，對接收到的參數加一次decode

而後從新看一下最終的顯示頁面

這兩個中文終於能正常顯示了:)

疑問1

爲何要A中是兩次編碼，而C中只有一次解碼呢？這是由於tomcat容器已經默認解了一次碼。

那又要問了，既然容器默認已經有解碼了，那在A中加一次編碼，C中不解碼可不能夠呢？

可能能夠，可能不能夠。由於容器解碼時使用的編碼方式是容器的默認編碼方式，多是UTF-8，多是GBK，也有多是其它亂七八糟的編碼方式。你不能保證跟你的編碼方式相同。因此這種方式可能會出現亂碼。

若是以爲兩次編碼的方式太煩了，而必定要使用這種一次編碼的方式也是能夠的。這裏就須要修改容器的默認編碼方式，讓它與你的編碼方式相同。好比修改爲UTF-8。怎麼修改呢？在tomcat安裝目錄下conf目錄下的server.xml：

把這一行變成

疑問2

細心的朋友可能發現了，瀏覽器對中文編碼以後，向C傳的明明是%E6%B5%8B%E8%AF%95這種形式的，爲何C接收到的倒是&æ&mirco...這樣的html轉義字符了呢？好吧，我也不清楚。。。

 

參考資料：

[1] 關於URL編碼 (http://www.ruanyifeng.com/blog/2010/02/url_encoding.html)