前端数据传递至后台时,需要对其进行编码,其中,编码格式可分为四种:application/x-www-form-urlencoded,multipart/form-data,application/json,text/plain。
text/plain是纯文本数据,这里不做解释,Navigator.sendBeacon会使用。
前后台完成数据交互的方式只有两种:一是form表单提交,二是ajax提交。
form表单可通过enctype属性设置编码类型,默认值为:application/x-www-form-urlencoded;ajax可通过contentType属性设置编码类型,默认值也是:application/x-www-form-urlencoded;
1.application/x-www-form-urlencoded
后台如何接收?使用request.getParameter(“work”);来获取参数名和参数值。
这种编码格式,是我们最常见的一种方式,将数据封装成一个字符串,参数名和参数值使用"=“拼接,参数之间使用”&"拼接,最终传递至后台的数据格式形如:key1=value1&key2=value2&…;
另外,key和value都会分别使用encodeURI()对其进行编码,也就是你所要传递的数据,实际上已经进行了一次编码,形如:name=Marydon&work=%E7%A8%8B%E5%BA%8F%E5%91%98,服务器接收到后干的第一件事就是使用URLDdecoder.decode()对name和value进行一次解码。
不管是form表单请求还是ajax请求,都是这样进行数据组装的。
get请求:没有请求体;会直接将form数据拼接到url中,用?隔开,数据对外可见;
post请求:将数据放到请求体中;无法直观看到要传输的数据,安全性相对高一点。
Content-Type属性,告诉服务器提交的数据的字符集是utf-8,并让服务器以utf-8格式解析数据,由此可见:
问题不在于服务器,而在于浏览器:当浏览器检测到编码格式为application/x-www-form-urlencoded并且为get请求时,浏览器会先用ISO-8859-1对form数据进行编码,然后再用encodeURI()对其进行编码。
所以,get请求导致后台接收到的中文出现乱码的根本原因是:页面字符集是utf-8,浏览器却按iso-8859-1进行重新编码,后台接收后以utf-8进行解码当然会出现乱码。
小结:
当表单数据的编码格式为:application/x-www-form-urlencoded时:
get请求,浏览器会将数据按照iso-8859-1进行重新编码,导致后台接收到中文时必然乱码;
post请求,浏览器会按照utf-8对要提交的数据进行编码,由于后台本身就是使用utf-8对其进行解析,所以才不会出现乱码的情况。
2.multipart/form-data
主要用于传输文件,将文件转换成二进制数据进行传输,不涉及转码问题。
后台如何接收?使用request.getInputStream();取值。
IE浏览器和chrome浏览器下,传输的form数据是不一样的;
3.application/json
后台如何接收?使用request.getReader()取值,也可以使用request.getInputStream()获取。
结果提交的数据还是form表单形式,根本不是json
以json格式进行数据的传输,从前端发送json形式的方式不常见,常见的是从服务器对服务器,即一台服务器发送json数据,另一台服务器负责接收。
言归正传,怎样才能通过ajax向后台传输json数据呢?
首先需要明白的是,前端向后台传输数据有且只有两种方式,一种是常见的字符串格式,另一种就是二进制数据,也就是不管你向后台传输什么类型的数据都会被转换成字符串或者二进制。