主要内容
- form表单的基本使用
- 通过ajax提交form表单
1. 表单主要做什么？
form表单在网页中主要用来采集数据。HTML中的《form》标签就是用来采集用户输入的信息，然后通过表单的提交操作，把采集到的数据发给服务器。
2. 表单由哪几部分组成？
- form标签
- input表单域 （type有 text, password, checkbox）
- button表单按钮
1.1 form标签有一些属性，他们是用来规定如何把form采集到的信息方式发送到服务器的
- action 的值为 URL地址 它是后端提供的一个url地址 这个URL地址专门负责提交过来的表单数据， 在未指定action URL地址的情况下 默认的是当前页面的URL地址
- method 的值为 POST或GET 它规定了以什么方式把表单数据提交给action的URL地址。 默认情况下。method的值是get， 表示通过URL地址的方式把表单数据提交到action URL。 一般实际开发中都是用post方式， post适合提交大量的，复杂的或者包含文件上传的数据
- enctype 的值为 application/x-www-form-urlencoded（在发送前编码所有的字符-这是默认值） multipart/form-data （不对字符进行编码）在使用包含文件上传控件的表单时，必须使用该值。 它规定了在发送表单数据前 如何对其进行编码
- target 的值为_blank, _self, _parent, _top, framename 它规定了在何处打开action url 。 blank表示新建页面中打开， self表示在相同的框架中打开
3. 表单的同步提交以及其缺点
-
击submit按钮，触发表单的提交操作，从而使页面页面跳转到action URL的行为
-
表单同步提交后，整个页面会发生跳转，用户的体验差， 页面之前的状态和数据都会丢失
-
解决这个缺点的解决方式就是 表单只负责收集数据 将数据提交到表单 让ajax来负责
4. 通过ajax来提交表单数据
主要步骤：
- 监听表单提交事件（有两种书写方式）
$('#form').submit(function(e){
})
$('#from').on('submit', function(e){
})
-
阻止表单默认提交行为 e.preventDefault()
-
用serialize()函数来快速获取表单数据， 他可以一次性获取表单中的所有数据
$('selector').serialize()
<form id="forml">
<input type="text" name="username">
<input type="password" name="password">
<button type="submit">提交</button>
</form>
<script>
$(function(){
$('#forml').serialize(); //username=ad23&password=12345
})
// 注意 使用serialize获取表单数据时 必须为每个表单添加name属性
