好像又回到了我们学习前端的起点——HTML
我们了解一下AJAX里的表单使用方法,让我们之前只能输入的表单增添一些交互的元素
目录
一.认识表单
表单我们不陌生,在网页中负责数据的采集,UI界面(HTML)中的<form>标签就是用于采集用户的各种信息,并提交到服务端进行处理
二.表单的组成部分
<form>标签
<input>表单域
<button>表单按钮
三.<form>标签的属性使用
1.action
action属性用来指定当前表单提交时发送至哪里
action的值是后端提供给我们的一个URL地址,我们表单中的信息都将发送到这个指定的URL地址
如果我们的表单没有填写action属性或者未给值的话,默认值为当前页面的URL地址
我们执行提交操作之后,页面会跳转到action指定的URL地址
2.target
target属性用来规定在何处打开action指定地址,默认值为_self,表示的是在相同的框架中打开action指定的URL,它有五个值:
_blank:在新窗口中打开
_self:(默认值)
_parent:在父框架集中打开
_top:在整个窗口中打开
framename:在指定框架中打开
3.menthod
monthod属性用来规定以何种方法把表单数据提交到action指定的URL地址
有俩个值:get(默认)/post
get:适合用来提交少量的简单的数据(会显示到URL地址栏中,安全性低)
post:适合用来提交大量的复杂的或者包含文件上传的数据(不会显示在URL栏中,安全性相对来说较高)
4.enctype
enctype属性用来规定在发送表单数据之前如何对数据进行编写
有三个值可以选择:
application/x-www-form-urlencoded(默认值):因为过于长不好写,所以被定为默认值,需要使用这个值时我们不写enctype属性即可
multipart/form-date:不对字符编码(在我们使用包含文件上传控件的表单时,必须使用该值)
text/plain:空格转换为"+"符号,但不对特殊字符进行编码
四.表单的同步提交
我们这样来理解表单的同步提交:
通过点击提交按钮(<button type="submit"></button>),触发表单的提交操作,使页面跳转到action指定的URL的行为叫做表单的同步提交
这个表单同步提交有俩个很大的缺点:
1.表单同步提交之后,整个页面都会发生跳转,用户体验很差
2.页面之前的状态和数据都会丢失
我们针对这俩个缺点,使用ajax来解决
原理:表单负责采集数据,Ajax负责将采集到的数据提交到服务器
五.AJAX解决表单同步提交的缺点
总的说分为俩步:
1.监听到表单的提交事件
2.阻止表单提交的默认行为(跳转行为)
1.监听表单提交事件
我们可以直接使用submit()方法监听,也可以使用on()方法包含submit的方法来监听
我们分别使用代码实现一下:
$("#btn").submit(function(e){
});
$("#btn").on("submit",function(){
});
2.阻止表单提交的默认行为
监听到事件之后,我们使用
event.preventDefault() 函数
来阻止表单提交的默认行为,我们代码实现:
$("#btn").on("submit",function(){
alert("这次我没有跳转");
e.preventDefault();
});
六.快速获取表单中的数据
我们一般在获取表单数据时,很是麻烦,这个控件val获取一下,那个控件val获取一下,真的是效率很低,所以我们的jQuery了这样一种方便的函数:
serialize()
$("form").serialize();
//一次性获取指定表单中所有的表单数据
//调用函数输出:
//username=值(用户名)&password=值(密码)
***必须为每一个表单元素都添加name属性,serialize()函数才可以获取到