from表单-Ajax解决同步提交的缺点

好像又回到了我们学习前端的起点——HTML

我们了解一下AJAX里的表单使用方法，让我们之前只能输入的表单增添一些交互的元素

---

目录

一.认识表单

二.表单的组成部分

三.

标签的属性使用

1.action

2.target

3.menthod

4.enctype

四.表单的同步提交

五.AJAX解决表单同步提交的缺点

1.监听表单提交事件

2.阻止表单提交的默认行为

六.快速获取表单中的数据

---

一.认识表单

表单我们不陌生，在网页中负责数据的采集，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()函数才可以获取到