~~开发工具与关键技术: 前端
作者:梁锦豪
撰写时间:2019/5 / 5~~
我们要经常用到表,而提交表单是一个最常见的业务需求,比如用户注册啊、登陆啊,一些信息的输入都是需要表单的提交。
同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作。
(例如:验证表单输入的正确性,如果错误就阻止提交,从新输入)此时可以通过submit事件,监听下提交表单的这个动作。
我们先来说一下表单一部分的属性和方法:
1、 首先是acceptCharset这个属性是服务器能够处理的字符集;等价于HTML中的accept-charset的特性
2、 Action属性,这个属性是接收请求的URL,也等价于HTML中的action特性
3、 Elements表单中所有的控件集合
4、 Enctype 请求的编码类型一般为UTF-8
5、 Length 表单中控件的数量
6、 重点method属性,要发送的HTTP请求,有两种请求方式:get和post。而表单默认的请求方式get方式,与post方式相比get更加的快,但是也有明显的缺点Get将表单里的数据添加到action所指向的URL后面,并且两者之间使用”?”连接,而各个变量之间使用”&”连接;Post是将表单中的数据放在form的数据体中,按照变量和值对象的方式,传递到所指向的action. 用户可以直接在浏览器上看到提交的数据,一些系统内部信息也一同显示在用户面前,这样非常的不安全
而相比于get,post更加的安全,传输的内容更加大(get是有上限的)所有更加建议使用post的方法进行传输,但是Get方式获取数据后,刷新不会有负面的影响,因为它只是获取数据,而Post方法刷洗页面重复提交可能会产生不良的后果。
7、 name 表单的名字
8、 重点reset()将所有表单与重置为默认值(空白、无值),也就是说着这个值是用来重置表单的
要先把type的值设为reset
如果没有重置表单那么当你下次打开表单时还会是你上次输入的内容
9、 重点submit(),这个方法是用来提交表单的,form表单都是默认自动提交表单的,如果需要通过submit进行处理的话,那么我们需要先禁止浏览器的这个默认行为,方法如图:
在form元素里面加个onsubmit的属性,设置其属性值为return false即可,在jQuery中可以直接在函数的结尾加return false即可,也可以阻止表单的提交:
10、 Target用于发送请求和接收相应窗口名称
如何获取表单,有三个方法:
- 通过id获取如JavaScript中的.getelementbyid()这个方法,而在jQuery中就是$(“#id”)
- 通过document.forms的方法可以获取到页面中所有的表单
- 通过名字进行访问(不推荐)
(这里引用自网络)提交的方式也有三种:
- 将input的type设置为submit
- 将button的type设置为submit
- 将input的type设为image