前端中文编码问题

测试环境，windows XP,IE6、IE8、firefox、chrome，测试结果可能会根据操作系统不同，有所差异

前端需求中经常会碰到前后台中文编码的问题，以下罗列了meta charset设置为GBK或UTF-8的情况下，中文的编码的场景和结论：

a链接中带中文

• chrome、firefox会根据meta charset属性，自动转码，且编码带%
• IE也会根据meta charset属性，传递数据，不带%

有时会碰到前端拼接url中带中文的问题，这时需要注意，最好对中文部分通过js的encodeURIComponent编码。注意不能对整个url进行encodeURIComponent编码，因为encodeURIComponent会对url中的"/"转码。

form表单提交

无论get、post提交，IE、chrome、firefox，均会根据meta charset属性，转码，编码带%。
在chrome、firefox下，若表单带accept-charset属性，则会根据该属性决定提交中文的编码

Ajax请求(原生)

get请求

chrome根据meta charset属性，自动转码，且编码带%
firefox无论UTF-8还是gbk，均使用utf-8编码，编码带%
IE无论UTF-8还是gbk，均使用gbk编码

post请求

IE、chrome、firefox，均会使用utf-8编码，无%
设置"Content-Type"为"application/x-www-form-urlencoded; charset=gbk;"也同样为UTF-8编码发送
其中chrome、firefox会自动修改charset为utf-8,IE不修改

小结

前端与后台合作，遇到中文问题，需要做好沟通，指定中文编码

• 碰到需要前端拼接url中带中文，需要对链接中的中文进行encodeURIComponent编码，以UTF-8的格式传过去。如果后台需要使用GBK的编码，最好拒绝，因为前端对编码的转换较弱。
• form中的中文，根据meta charset决定提交的中文编码，GBK编码提交就是GBK，UTF-8编码提交就是UTF-8
• Ajax提交(原生)，get请求，对中文进行encodeURIComponent编码，post请求默认为UTF-8编码。若使用jQuery的get请求，用data传递数据过去，jQuery会自动帮你将中文进行encodeURIComponent编码。

参考资料

• 前端工程师的编码遭遇战
• 关于URL编码
• web编码问题