百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

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

bigegpt 2024-09-22 00:42 3 浏览

开发问题描述:

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

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

相关推荐

Dify「模板转换」节点终极指南:动态文本生成进阶技巧(附代码)Jinja2引擎解析

这篇文章是关于Dify「模板转换」节点的终极指南,解析了基于Jinja2模板引擎的动态文本生成技巧,涵盖多源文本整合、知识检索结构化、动态API构建及个性化内容生成等六大应用场景,助力开发者高效利用模...

我用C#造了个AI程序员:自动调试+重构代码实战

在软件开发的世界里,调试和重构代码往往占据了程序员大量的时间。我一直梦想着能有一个智能助手,帮我处理这些繁琐的工作。于是,我决定用C#打造一个AI程序员,让它具备自动调试和重构代码的能力。系统架构设计...

公文自动排版vba代码(公文自动排版vba代码)

Sub公文自动排版()'设置页面参数(单位:厘米)WithActiveDocument.PageSetup.TopMargin=CentimetersToPoints(3.7)&#...

Anthropic最强代码神器:Claude Code系统提示词

最近,在融合Opus-4之后,ClaudeCode的整体能力直线飙升.甚至一度把曾经的最强开发工具——Cursor打的抬不起头来。无论是代码生成的准确度,还是智能补全的丝滑体验,都让人印象深...

使用 Ruff 进行 Python 代码格式化与静态检查

随着Python项目的规模增大,保持一致的代码风格和高质量的代码变得尤为重要。Ruff是一个现代、高性能、支持lint和格式化的Python工具,能帮助你快速发现并修复常见代码问题。本文...

基础语法篇:格式化输出 含完整示例代码

所谓格式化输出就是按照一定格式来输出对应的内容,在Python的语法中格式化输出包含两种:格式化符号、格式化字符串一、格式化符号常用的格式化符号包括%s(将内容转换为字符串,放入占位位置)、%d(将内...

代码整洁如诗!Keil 插件上线,一键格式化代码,告别风格混乱!

引言:代码格式不统一?你的团队还在为“括号位置”吵架吗?嵌入式开发者们,你是否经历过这些抓狂瞬间?代码风格“百花齐放”:同事的代码缩进用空格,你的用Tab,合并时冲突频发!手动调整耗时费力:为了通过C...

[信捷PLC] 信捷PLC之C函数编程(一)

前言写PLC程序,越来越觉得结构化文本编程语言(ST)给PC编程带来的便利,在处理一些数据上,可以写的更加灵活。所以,在项目PLC选型上,我都会优先选择支持结构化文本的PLC。国内有些厂商推出了一些较...

C语言-HelloWorld解析(c语言的helloworld怎么写)

使用VisualStudio2017开发工具新创建一个项目,编写第一个C语言程序。#include<stdio.h>voidmain(){printf("HelloW...

VSCode 配置 C++ 开发环境!教程详解

第一步、安装VSCode应用程序打开VSCode官网,下载对应安装包并默认安装(这里指明:安装路径可以修改)第二步、安装相关插件此时的VSCode仅仅是一个英文文本编辑器,还称不上开发工具,所以需要...

C语言进阶教程:C语言与汇编语言交互

C语言和汇编语言的交互是底层编程和性能优化中的一个重要方面。理解它们如何协同工作,可以帮助开发者更好地控制硬件、优化关键代码段以及理解编译器的行为。为什么需要在C语言中嵌入汇编?尽管C语言已经提供了相...

C语言如何处理平台相关代码(c语言的开发平台)

在进行跨平台C编程时,不可避免地会遇到需要针对不同操作系统或硬件架构编写特定代码的情况。C语言通过预处理器指令,特别是条件编译指令,为我们提供了处理平台相关代码的有效机制。最常用的就是利用预定义的宏(...

C语言:hello world(c语言helloworld代码)

环境:a.初学者建议用“啊哈C”,这款软件简单易装;b.devc.visualstdiod.Vc6.0第一行代码:#include<stdio.h>#<stdio.h&g...

C语言之编译器集合(编写c语言编译器)

C语言有多种不同的编译器,以下是常见的编译工具及其特点:一、主流C语言编译器1.GCC(GNUCompilerCollection)特点:开源、跨平台,支持多种语言(C、C++、Fortran...

适合零基础初学者学习C语言第一课教程,揭开C语言的神秘面纱

一、C语言简介我刚接触编程,首先想要学习的就是C语言,这次我就把我的感悟用我自己理解的文字表述出来,这样对刚学C语言的人来说,才是比较友好的。因为我们都没有C语言的基础,不懂啥是编程,啥事代码。我们...