网站改版 优势,手机建站平台淘客,永久链接生成器,个人网页html实例完整代码在Spa单页面横行的时代#xff0c;前后端交互基本都是Json交互#xff08;也有通过FormData的#xff0c;比如上传文件#xff09;。而在之前的Jsp#xff0c;Php前后不分家的时候#xff0c;前后交互好大一部分都是通过Form表单来完成的。From标签个属性叫 enctype… 在Spa单页面横行的时代前后端交互基本都是Json交互也有通过FormData的比如上传文件。而在之前的JspPhp前后不分家的时候前后交互好大一部分都是通过Form表单来完成的。From标签个属性叫 enctype这属性指定了Form的Content-Type可取的只有application/x-www-form-urlencoded multipart/form-data text/plain。 而Content-Type包含3个部分 media-type 资源或数据的 MIME type 必填 charset 字符编码标准 boundary 对于多部分实体boundary 是必需的其包括来自一组字符的1到70个字符已知通过电子邮件网关是非常健壮的而不是以空白结尾。它用于封装消息的多个部分的边界 application/x-www-form-urlencoded 是Form默认的Content-Type表单提交时编码必须遵循以下标准 key和value都会被编码。空格被替换为‘’保留字编码对着参照 [RFC1738]非转义字符被替换为‘’%hh‘’的格式一个%和两个代表示ASCII码的16进制数字换行被替换为‘%D0%0A’(对应CR LF)都可以通过encodeURI函数转换详细还请查阅 mdn key和value用‘’来分隔每一对key和value用‘’来分隔 比如 multipart/form-data 是用FormData来传递数据和上边的区别是FormData用来传递大数据非ascii字符和二进制数据具体请参考另一篇文章 post使用form-data和x-www-form-urlencoded的本质区别 这篇博客讲的感觉很详细了编码规则如下 包含一个Content-Disposition字段值为form-data 一个name属行值为对应表单key的name字段 所有的Mime传输一样用CR LF‘%0D%0A’来分隔数据 比如划线处为规则3 接下我详细说下multipart/form-data编码假设我们有以下Form FORM actionhttp://server.com/cgi/handleenctypemultipart/form-datamethodpostPWhat is your name? INPUT typetext namesubmit-nameBRWhat files are you sending? INPUT typefile namefilesBRINPUT typesubmit valueSend INPUT typereset
/FORM 当用户输入‘Larry’在文本input中还选择了一个文本文件‘file1.txt’然后点击提交按钮传向后台的body体为 Content-Type: multipart/form-data; boundaryAaB03x--AaB03xContent-Disposition: form-data; namesubmit-nameLarry--AaB03xContent-Disposition: form-data; namefiles; filenamefile1.txtContent-Type: text/plain... contents of file1.txt ...--AaB03x-- 我们看到蓝色部分就是Content-Type参考上上边提到的少了charset多了个boundary我们知道在application/x-www-form-urlencoded 中是用‘’来告诉服务器每一个key和value比如一个get请求: http://localhost:8080/api?nameJohnage12 ,那么在multipart/form-data我们怎么告诉服务器呢答案就是boundary有了这个字段服务器就知道一个value是从哪里开始和到哪里结束这个字段开发者是不用写的浏览器会自动加上网上说我们也可以自行设置比如你可以设置你喜欢的字符但是我没有成功每次都是随机的给分配一个测试如下 回到刚才的Form表单如果用户选择了第二个文件‘file2.gif’传输结构会是以下 Content-Type: multipart/form-data; boundaryAaB03x--AaB03xContent-Disposition: form-data; namesubmit-nameLarry--AaB03xContent-Disposition: form-data; namefilesContent-Type: multipart/mixed; boundaryBbC04y--BbC04yContent-Disposition: file; filenamefile1.txtContent-Type: text/plain... contents of file1.txt ...--BbC04yContent-Disposition: file; filenamefile2.gifContent-Type: image/gifContent-Transfer-Encoding: binary...contents of file2.gif...--BbC04y----AaB03x-- 转载于:https://www.cnblogs.com/hanshuai/p/11210803.html
