Js如何利用URL往後台傳入中文參數亂碼問題

我們常常會在前台請求以後後台對應URL時，在URL中利用此URL向後台傳遞參數，但如果參數為中文會存在亂碼問題。下面我們考慮一個場景來詳細說明URL傳遞參數時的亂碼解決方案。

假設我們頁面中擁有一個輸入框、一個提交按鈕，當我們點擊提交按鈕時取得輸入框中使用者輸入的值，然後利用URL傳遞參數的方式，將輸入框的值傳遞到背景。我們假設後台對應web層處理技術使用Struts2的Action進行資料處理，假設Action中處理資料的URL為/say。具體頁面急請求Action程式碼如下：

html程式碼：

<input type="text" id="name" name="name" value="${user.name}" />
<button id="sub" onclick="sub()">提交</button>
javascript代码：
<script type="text/javascript">
function sub(){
var name = document.getElementById("name").value;①
 window.location = "sayHello?user.name=" + name;②
}
</script>

以上程式碼首先從id為name的輸入方塊取得輸入框的值，接著利用window.localtion請求URL為sayHello的Action，在此action後面利用key=value這樣的格式，傳入的參數，並根據Struts2的機制利用傳入的輸入框中的值，更新了後台User實體的name屬性。

URL編碼及解碼原理：

由於我們利用URL傳遞參數這種方式是依賴與瀏覽器環境中的，也就是說URL及URL中包含的各個key=value格式的傳遞參數鍵值對參數是在瀏覽器網址列中的處理原理處理相應編碼後傳遞至後台進行解碼的。

由於我們沒有進行任何處理，此時javascript請求URL並傳參數存在中文時（也就是說輸入框中輸入中文時），對URL的中文參數進行編碼是按照瀏覽器機制進行編碼的。此時編碼存在亂碼問題。

假設輸入框中輸入的內容為「測試」二字，後台Action接受到的參數值為亂碼。 javascript中利用encodeURI()方法進行編碼。

1、利用encodeURI()在javascript中對中文URL參數進行編碼時，「測試」二字會轉換為「%E6%B5%8B%E8%AF%95」

2、但是瀏覽器機制會認為「%」是一個轉義字符，瀏覽器會把地址欄URL中的傳遞的已轉換參數「%」與「%」之間的已轉義字符進行處理傳遞到後台Action。這樣會造成與實際經過encodeURI()編碼後的URL不符，因為瀏覽器誤認為「%」是轉義字元字元了，它並未將「%」視為個普通字元。

3、要使得透過encodeURI()轉換後的URL被瀏覽器正常處理，必須在外層再用encodeURI()處理一次已被encodeURI()編碼後的RUL。這此處理encodeURI()會將已編碼後的URL中被瀏覽器解析為轉義字元的「%」再次進行編碼，轉換為普通字元。

4、正常處理後，前面javascript程式碼中②處程式碼為：

#

window.location = encodeURI(encodeURI("sayHello?user.name=" + name));

5、處理後的URL不在是透過一次 encodeURI()轉換後的字串」%E6%B5%8B%E8%AF%95“，而是經過上一步兩層encodeURI()處理URL處理後的字串”%25E6%B255%258B%25E8%AF%2595“，透過再次編碼原有被瀏覽起解析為轉義字符的”%“被再次編碼，轉換成了普通字符轉”%25“。

此時前端javascript程式碼對帶有中文的URL編碼已經完成，並透過URL傳遞參數的方式傳遞到後台Action等待處理，Action獲取到正常轉換切無亂碼的參數為”%25E6%B255%258B%25E8%AF%2595“，此字串對應的中文正是我們輸入的」測試「二字。

Action取得到這樣的字串無法處理，因為它並不是我們前端輸入的來源資料」測試「二字，而是進過兩次encodeURI()編碼後的字串。於是我們需要利用後台的一個API對前端編碼後的參數字串進行解碼，對應解碼API是URLDecoder.decode(user.getName(),"UTF-8")。

URLDecoder的decode(String str,String ecn)方法有兩個參數，第一個參數為待解碼的字串，第二個參數為解碼時的對應編碼。我麼在背景使用此API解碼的程式碼為：

URLDecoder.decode(user.getName(),"UTF-8");

#總結：

此時我們完成了URL傳入中文參數出現亂碼的問題，總結步驟大致分為一下階段：

#1、在javascript中利用encodeURI()兩次嵌套對URL中的中文參數進行編碼

2、在後台取得到進過前端encodeURI()編碼後的字串，使用decode(String str,String ecn)方法進行解碼

以上是Js如何利用URL往後台傳入中文參數亂碼問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！