form表单的标签属性以及通过Ajax提交表单数据

一、form表单相关知识

1、定义

表单在页面中主要负责数据采集功能。HTML中的form>标签就是用于采集用户输入的信息，通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。

2、组成部分

表单由3部分组成： 表单标签、表单域（包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等）和表单按钮组成。

<!-- 表单标签 -->
<from> 
	<!-- 表单域 -->
	<input type = "text" name = "email_or_mobile" />
    <input type = "password" name = "password" />
    <input type = "checkbox" name = "remember_me" checked />
    <!-- 表单按钮 -->
    <button type = "submit" >提交</button>
</from>

3、< form >标签的属性

< form >标签用采集数据，form标签的属性是用来规定如何把采集到的信息发送到服务器。

属性	值	说明
action	URL地址（后端的一个URL）	这个URL地址专门负责接收表单提交过来的数据
method	get(默认值)或post	规定以何种方式把表单数据提交到 action URL
enctype	application/x-www-form-urlencoded(默认值)、 multipart/form-data、text/plain	规定在发送表单数据之前如何对其进行编码
target	_self（默认值，在相同框架中打开）、_blank(在新窗口打开)、_parent(在父框架中打开)、framename(在指定框架中打开)	规定在何处打开 action URL

4、注意点

① 当提交表单后，页面会立即跳转到action属性规定的URL地址

② get方式适合用来提交少量的、简单的数据，post方式适合用来提交大量的、复杂的或包含文件上传的数据

③ 如果表单的提交不涉及文件上传操作，enctype值直接默认就行。
（enctypede的值application/x-www-form-urlencoded表示在发送前编码所有字符串，multipart/form-data表示不对字符编码（在使用包含文件上传控件的表单时，必须使用该值），text/plain表示空格转换为“+”加号，但不对特殊字符编码）

二、表单同步提交及缺点解决方案

1、什么是表单的同步提交

通过点击submit按钮触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交。

2、表单同步提交的缺点

① < form >表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。
② < form >表单同步提交后，页面之前的状态和数据会丢失。

3、解决方案

表单只负责采集数据，Ajax负责将数据提交到服务器

三、通过Ajax提交表单数据

1、监听表单提交事件

// 方法一
$('#form').submit(function(e){
    console.log('监听到了表单的提交事件')
})

// 方法二
$('#form').on('submit',function(e){
    console.log('监听到了表单的提交事件')
})

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

当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转。

$('#form').submit(function(e){
    // 阻止表单的提交和页面的跳转
    e.preventDefault()
})

$('#form').on('submit',function(e){
    // 阻止表单的提交和页面的跳转
    e.preventDefault()
})

3、快速获取表单数据

为了简化表单中数据的获取操作，jQuery提供了 serialize()函数 可以一次性获取到表单中的所有的数据

// #form为<form>标签的id
$('#form').serialize()
// 调用的结果：是键值对的格式，多个数据之间用&间隔
// username = 用户名的值 & password = 密码的值