点击form表单 提交按钮后，表单中的值，到底转换成了什么？

开发问题描述:

今天在写一个提交表单的程序的时候,由于提交数据比较多,而且需要采用ajax无跳转方式提交,所以就采用了一种比较快捷的方式,序列化表单,数据提交成功,但是心里有点疑惑,序列化后的表单为什么可以直接提交给php后台,而且后台也能很方便的接收.?

序列化后的表单的数据结构

以上就是该表单通过jQuery序列化后的结果,虽然这样能够很方便的提交大量表单数据,但是就是想不通,为什么这样一个字符序列能够直接提交给后台

为了搞清楚这个问题,于是在网上查阅了很多资料,并通过几次尝试,基本上搞清了,其中的原理, 要理解这个原理,首先要知道表单提交的过程. 下面着重分析下表单提交的过程(不含文件上传部分)

表单提交过程如下

(1)确定有效控件

在这个过程中,浏览器,需要判断待提交表单中,哪些控件是有效控件,哪些控件是无效控件,所谓有效控件就是指,后台能够被后台获取值的控件,具体的分析,已经在上一篇文章中详细描述过,这里就不在赘述了.

(2)获取控件数据

第(1)完成之后,浏览器就需要收集有效控件的值,并将其组织成 name=value的形式 多个值之间用 &号分开,其结构类似于

name1=value1&name2=value2&name3=value3的形式.

(3)对数据进行编码

表单对数据的编码方式有很多种,常用主要有两种

<1> application/x-www-form-urlencoded

这是表单默认的提交方式,也就是在设置表单编码方式的情况下,表单提交时会默认采用这种网址编码形式,对表单数据进行提交

具体案例分析如下:

这里是采用原生的form进行提交,而非ajax提交方式,从中分析,可以看到,当点击提交按钮后,表单确实是被转换成了一段name=value类型的键值对,而且中间用&符号隔开,通过对比可以发现,这个结果和jQuery序列化表单的结果是相同的,

这样就很明白了,所谓的序列化表单就是使用了js收集表单数据后,通过拼接组装,已达到模拟原生表单提交数据的效果,

需要注意的是,这种编码方式,只能用于普通的键值对表单提交,而不能用于文件上传,

<2>multipart/form-data编码方式

这种编码方式,主要是用来实现文件上传而设置的,它会文件以二进制的形式,放置于请求体中,分段发送给服务器,需要注意的是使用该编码方式时,表单的提交方式必须设置为 method=post,由于时间关系,这里就暂时不放案例了,后续文章会继续介绍.

(4)发送数据

最后一步就是将组装好的数据,根据表单的action所指示的服务器地址,进行发送,服务器接收到数据后,根据相关参数,返回客户端所需数据

以上就是个人所理解的表单提交过程,仅供参考,如有不全或不当之处,欢迎评论,指出,交流学习!!