form表单提交后弹出新窗口（点击form表单提交按钮后）

form表单提交后弹出新窗口（点击form表单提交按钮后）(2)获取控件数据 在这个过程中 浏览器 需要判断待提交表单中 哪些控件是有效控件 哪些控件是无效控件 所谓有效控件就是指 后台能够被后台获取值的控件 具体的分析 已经在上一篇文章中详细描述过 这里就不在赘述了.为了搞清楚这个问题 于是在网上查阅了很多资料 并通过几次尝试 基本上搞清了 其中的原理 要理解这个原理 首先要知道表单提交的过程. 下面着重分析下表单提交的过程(不含文件上传部分)表单提交过程如下(1)确定有效控件

开发问题描述:

今天在写一个提交表单的程序的时候 由于提交数据比较多 而且需要采用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所指示的服务器地址 进行发送 服务器接收到数据后 根据相关参数 返回客户端所需数据

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