表单的数据采集和提交
在实现 form 表单数据采集和提交之前,我们首先了解一下前后端协作的流程。
我们前端工程师做好表单后,交给用户在浏览器上填报,用户填完信息后,点击提交按钮,数据通过互联网发给了服务器,后端工程师在服务器上开发程序,接收用户提交过来的数据,最后在把数据存入数据库。
接下来,我们做一个用户登录的案例,具体演示一下这个流程。
打开编辑器 ,新建一个 case-signin[saɪn ɪn].html 文件,补全基础代码,在 body 里添加 form 标签。
在 form 标签里编写标题 "手机号 : ",后面添加一个 input 标签,属性 type 的值为 text,再添加一个 br 标签。
编写标题 "密码: ",后面再添加一个 input 标签,属性 type 的值为 password,再添加一个 br 标签。
最后再添加一个 input 标签,定义 type 属性值为 submit,value 属性值为登录。保存文件。
在浏览器中打开页面,表单制作好了。输入一个合法的手机号:"15120085233",你也可以输入自己的手机号。再输入一个六位密码 :"123456",点击提交。仔细观察,除了地址栏里多了一个问号 “?”,也没有发现什么了。这是因为我们没有收集到表单的数据。
为了收集表单数据,需要给表单控件添加 name 属性。有了这个 name,浏览器会自动为我们收集表单控件数据。
给手机号控件定义 name 属性 ,值为 pnumber (读作p number)。给密码控件定义 name 属性,值为 password。这样,当用户输入手机号和密码时,这两个值就帮助我们存储了用户输入的内容。保存页面。
回到浏览器,刷新。再次输入手机号和密码,点击提交。你会发现:地址栏的页面名字后面除了问号,还有一串字符,仔细分析一下:这串字符由 & 符号连接了两个部分。不难发现,每一部分的等号前面,是表单控件定义的 name 值,等号后面,是用户输入的数据。username=xiaofeng&password=123456
配音者(露脸):这下我们豁然开朗,浏览器现在已经帮助我们收集好了数据。接下来需要思考的就是如何将数据提交给服务器了。
回到编辑器。这时,我们可以去后端的小伙伴那里,要到服务器的地址,填在表单的 action 属性里。这是我为大家准备好的服务器地址,可以用它来测试。保存。
回到浏览器,刷新。输入用户名和密码,点击提交,服务器给我们返回了成功的信息!
写到这里也许你会产生疑问 ,作为用户输入的表单内容 ,填写的信息怎么能显示在地址栏呢?这样是不是非常的不安全呢?
的确,如果表单里包含敏感信息,不应该显示在地址栏里。解决方法是给form标签定义 method 属性,最常用的属性值有两个:get 和 post 。
get 是默认值,浏览器会把收集好的表单数据,加到服务器地址的后面,提交给服务器。
post 值,不但能够收集表单的数据,而且不会在地址栏里暴露隐私数据。
回到编辑器 ,给 form 表单定义 method 属性 ,值设置为 post。保存。
回到浏览器,刷新。再次输入手机号和密码,点击提交按钮,服务器同样返回了成功的信息。
你可能很好奇,浏览器会把表单的数据收集到哪里呢?我们能不能看到呢?
在浏览器中,使用 windows 系统的小伙伴按下键盘的F12.使用 Mac 系统的小伙伴按下fn+F12;或者在浏览器窗口里点击鼠标右键,检查,打开开发者工具窗口,选择 network,在 all 页签下点击这个地址,在 Payload[ˈpeɪləʊd] 下面,就能看到我们填写的数据。
实际上,这些数据只有你才能看到,再也不用担心别人窥探你的信息了。
配音者(尾声): 表单的数据收集和提交功能就讲完了,你也来制作一个登录表单吧!
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
今日已有369人领取成功

猜你喜欢LIKE
相关推荐HOT
更多>>
SQL查询干货:如何查询表中的前几名
我们在学习数据库查询时,经常会遇到关于分组和聚合函数的查询,比如查询每门课程的最高分,每位同学的平均分,其实这些都是比较一般的问题。...详情>>
2023-03-14 17:16:11
Java变量详解
Java变量详解你了解吗?我们学习任何一门编程语言时,一般学习的第一个知识都是关于变量的定义,只有学习了变量的定义我们才能继续往下学习其他...详情>>
2023-03-02 17:30:00
Java学到什么程序可以找第一份工作?
众所周知,目前世界上的疫情形式非常严峻,包括国内的疫情也非常紧张。在这样的形势下,很多企业为了生存都在想办法走出困境,比如出现了一些裁...详情>>
2023-02-28 17:43:57
同事哭了,只因让他测这20道JavaScript代码题
由于JavaScript 是一种容错率极高的编程语言,许多在其他编程语言中非法的表达式在 JavaScript 中都能正常工作,是不是觉得很神奇? 正是因...详情>>
2023-02-08 17:07:00热门推荐
Spring Cloud Alibaba Nacos 注册中心使用教程
沸一文带你搞懂Servlet请求路径匹配
热SQL查询干货:如何查询表中的前几名
热启动Maven项目时遇到的那点麻烦事儿
新Spring管理事务时可以捕获异常吗?
完全搞懂数据库行列转换查询
springboot+mybatis如何快速插入大量数据?
Java变量详解
Java中注解的原理分析
Java学到什么程序可以找第一份工作?
为什么JAVA要求越来越高
前后端交互过程中跨域问题的解决思路
Java中枚举类型
使用EL表达式时,PropertyNotFoundException异常的解决过程
技术干货






