JavaScript encodeURI and encodeURIComponent_javascript tips

The encodeURI and encodeURIComponet functions are both used in JavaScript to encode URIs and convert relevant parameters into data in UTF-8 encoding format. When the URI performs location jump, non-ASCII codes such as Chinese and Japanese in the parameters will be code converted.

The functions of these two functions are relatively similar, but there are some differences.

encodeURI: There are 82 characters that will not be encoded: !, #, $, &, ', (,), *, ,,,-,.,/,:,;,=,?,@, _,~,0-9,a-z,A-Z
encodeURIComponent: There are 71 characters that will not be encoded: !, ', (,), *, -, ., _, ~, 0-9, a-z, A-Z

Question:

ajax.get ( url '?k1'=v1 '&k2'=v2 '&k3'=v3, ... );

Since the URL is only encodeURI-encoded, when the parameter you want to submit is searchWord = a b, it becomes a b.

Solution:

ajax.post( url, params,....)

　where params is the object.

Reason: If the parameter is an object or array, the component library has already encodeURIComponent for you. And if you just use strings, the component library does nothing, so the special characters are filtered when it reaches the backend.

Usage of encodeURI()

　This method does not encode ASCII letters and numbers, nor does it encode these ASCII punctuation characters: - _ . ! ~ * ' ( ) .

　The purpose of this method is to completely encode the URI, so the encodeURI() function will not escape the following ASCII punctuation marks that have special meanings in the URI: ;/?:@&= $, #

Tip: If the URI component contains delimiters, such as ? and #, you should use the encodeURIComponent() method to encode each component separately.

Example:

document.write(encodeURI("http://www.w3school.com.cn")+ "<br />") 
document.write(encodeURI("http://www.w3school.com.cn/My first/")) 
document.write(encodeURI(",/&#63;:@&=+$#")) 
//批注：只转换域名后面的部分，并且对,/&#63;:@&=+$#不处理。 
// http://www.w3school.com.cn 
// http://www.w3school.com.cn/My%20first/ 
// ,/&#63;:@&=+$#  

　The decodeURI() function can decode the URI encoded by the encodeURI() function.

　encodeURIComponent() usage

　This method does not encode ASCII letters and numbers, nor does it encode these ASCII punctuation characters: - _ . ! ~ * ' ( ) .

Other characters (such as :;/?:@&= $,# which are punctuation marks used to separate URI components) are replaced by one or more hexadecimal escape sequences.

Tip: Please note that the encodeURIComponent() function is different from the encodeURI() function in that the former assumes that its parameters are part of the URI (such as protocol, hostname, path, or query string). The encodeURIComponent() function therefore escapes the punctuation characters used to separate parts of the URI.

Example:

document.write(encodeURIComponent("http://www.w3school.com.cn")) 
document.write(encodeURIComponent("http://www.w3school.com.cn/p 1/")) 
document.write(encodeURIComponent(",/?:@&=+$#")) 
//对比 
// http%3A%2F%2Fwww.w3school.com.cn 
// http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F 
// %2C%2F%3F%3A%40%26%3D%2B%24%23  

　The decodeURIComponent() function can decode the URI encoded by the encodeURIComponent() function.