How does Js use URL to pass in garbled Chinese parameters to the background?

We often use this URL in the URL to pass parameters to the backend when the frontend requests the corresponding URL in the backend. However, if the parameters are in Chinese, there will be garbled problems. Let's consider a scenario to explain in detail the solution to garbled characters when passing parameters in the URL.

Suppose we have an input box and a submit button on our page. When we click the submit button, we get the user input in the input box. value, and then use the URL to pass parameters to pass the value of the input box to the background. We assume that the background corresponding to the web layer processing technology uses Struts2 Action for data processing, assuming that the URL of the data processed in the Action is /say. The specific page urgent request Action code is as follows:

html code:

<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>

The above code first obtains the value of the input box from the input box with the id of name. Then use window.localtion to request the Action whose URL is sayHello. After this action, use the format of key=value, the incoming parameters, and use the value in the incoming input box according to the Struts2 mechanism to update the background User entity. name attribute.

URL encoding and decoding principle:

Because the way we use URL to pass parameters depends on the browser environment, that is to say, the URL and each key=value format contained in the URL The key-value pair parameters of the passed parameters are processed by the processing principle in the browser address bar and then passed to the background for decoding after processing the corresponding encoding.

Since we have not performed any processing, when the javascript requests the URL and passes the parameters in Chinese (that is, when Chinese is entered in the input box), the Chinese parameters of the URL are encoded according to the browser mechanism. of. At this time, there is a garbled encoding problem.

Assume that the content entered in the input box is the word "test", and the parameter value received by the background Action is garbled. Use the encodeURI() method to encode in javascript.

1. When using encodeURI() to encode Chinese URL parameters in javascript, the word "test" will be converted into "%E6%B5%8B%E8%AF%95"

2. However, the browser mechanism will consider "%" as an escape character, and the browser will process and pass the escaped characters between the converted parameters "%" and "%" passed in the address bar URL. Go to the background Action. This will cause inconsistency with the actual URL encoded by encodeURI(), because the browser mistakenly believes that "%" is an escape character, and it does not regard "%" as an ordinary character.

3. In order for the URL converted by encodeURI() to be processed normally by the browser, it must be encodeURI() processed again in the outer layer and has been encodeURI() encoded RUL. This processing encodeURI() will re-encode the "%" in the encoded URL that is parsed as an escape character by the browser and convert it into a normal character.

4. After normal processing, the code at ② in the previous javascript code is:

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

5. The processed URL is no longer a string converted by encodeURI()"%E6%B5%8B%E8%AF%95", but the string after the URL processing has been processed by the previous two-layer encodeURI()"%25E6%B255%258B%25E8%AF%2595", by re-encoding the "%" that was originally interpreted as an escape character when browsing, it was re-encoded and converted into an ordinary character and converted to "%25".

At this time, the front-end javascript code has completed encoding the URL with Chinese characters, and passed the parameters through the URL to the background Action to wait for processing. The Action obtains normal conversion without garbled characters. The parameter is "%25E6%B255%258B%25E8%AF%2595". The Chinese character corresponding to this string is exactly the "test" two we entered. Character.

Action cannot process such a string, because it is not the word "test" of the source data input by our front end, but after being encoded twice encodeURI() String. So we need to use an API in the backend to decode the parameter string encoded by the front-end. The corresponding decoding API is URLDecoder.decode(user.getName(),"UTF-8").

The decode(String str, String ecn) method of URLDecoder has two parameters. The first parameter is the string to be decoded, and the second parameter is the corresponding encoding when decoding. The code we use to decode using this API in the background is:

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

Summary:

At this point we have completed the problem of garbled Chinese parameters in the URL. The summary steps are roughly divided into the following stages:

1. Use encodeURI() in javascript to encode the Chinese parameters in the URL twice.

2. Get the information in the background For the front-end encodeURI() encoded string, use decode(String str, String ecn) method to decode

The above is the detailed content of How does Js use URL to pass in garbled Chinese parameters to the background?. For more information, please follow other related articles on the PHP Chinese website!