(一)form表单的基本使用
1.表单
表单在网页中主要负责 数据采集功能。HTML中标签，就是用于采集用户输入的信息，并通过 标签的提交操作，把采集的信息提交到服务器端进行处理
2.表单的组成部分
- 表单标签
- 表单域：包含了文本框，密码框，隐藏域(
type = 'hidden')，多行文本框，复选框，单选框，下拉选择框和文件上传框等等 - 表单按钮：通过设置
type属性为submit来触发form表单的提交
3.<form>标签的属性
<form>标签用来采集数据，<form>标签的属性则是用来规定如何把采集到的数据发送到服务器
| 属性 | 值 | 描述 |
|---|---|---|
action |
URL地址 | 规定当提交表单时，向何处发送表单数据 |
method |
get或post |
规定以何种方式把表单数据提交到action URL |
enctype |
application/x-www-form-urlencodedmultipart/form-datatext/plain |
规定在发送表单数据之前如何对其进行编码 |
target |
_blank_self_parent_topframename |
规定在何处打开action URL |
3.1 action
action属性用来规定当提交表单时，向何处发送表单数据。
action属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。
当 <form>表单在未制定action属性值的清空下，action的默认值为当前页面的 URL 地址
注意: 当提交表单后，会立即跳转到action 属性指定的 URL 地址
3.2 target
target 属性用来规定 在何处打开 action URL
它的可选值有5个，默认情况下，target的值是 _self，表示在相同的框架中打开 action URL
| 值 | 描述 |
|---|---|
_blank |
在新窗口打开。 |
_self |
默认。在相同的框架中打开。 |
_parent |
在父框架集中打开。（很少用） |
_top |
在整个窗口中打开。（很少用） |
framename |
在指定的框架中打开。（很少用） |
3.3 method
method属性用来规定 以何种方式 把表单数据提交到 action URL
它的可选值有两个，分别是 get 和 post
默认情况下，method的值为 get， 表示通过URL地址的形式，把表单数据提交到 action URL
注意：
get方式适合用来提交少量的，简单的数据post方式适合用来提交大量的，复杂的，或包含文件上传的数据
在实际开发中， 表单的post提交方式用的最多，很少用 get。例如登录、注册、添加数据等表单操作，都需要使用 post 方式来提 交表单。
3.4 enctype
enctype属性用来规定在 发送表单数据之前如何对数据进行编码
它的可选值有三个，默认情况下，enctype的值为application/x-www-form-urlencoded，表示在发送前编码的所有字符
| 值 | 描述 |
|---|---|
application/x-www-form-urlencoded |
在发送前编码的所有字符（默认） |
multipart/form-data |
不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。 |
text/plain |
空格转换为"+"加号，但不对特殊字符编码。（很少用) |
注意：
- 在涉及到文件上传的操作时，必须将 enctype 的值设置为
multipart/form-data - 如果表单的提交不涉及到文件上传操作，则直接将 enctype 的值设置为
application/x-www-form-urlencoded即可
4.表单的同步提交及缺点
4.1表单的同步提交
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交
4.2表单同步提交的缺点
<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差<form>表单同步提交后，页面之前的状态和数据会丢失
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="/login">
<input type="text" name="user_name" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
</body>
</html>
4.3 如何解决表单同步提交的缺点
如果使用表单提交数据，则会导致以下两个问题：
- ① 页面会发生跳转
- ② 页面之前的状态和数据会丢失
解决方案：表单只复杂采集数据，Ajax负责将数据提交到服务器
(二)通过Ajax提交表单数据
1.监听表单提交事件
在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<form action="/login" id="f1">
<input type="text" name="user_name" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
<script>
$(function () {
// 第一种方式
$('#f1').submit(function () {
alert('监听到了表单的提交事件')
})
// 第二种方式
$('#f1').on('submit', function () {
alert('监听到了表单的提交事件2')
})
})
</script>
</body>
</html>
2.阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault()函数，来阻止表单的提交和页面 的跳转
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/jquery.js"></script>
</head>
<body>
<form action="/login" id="f1">
<input type="text" name="user_name" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
<script>
$(function () {
// 第一种方式
$('#f1').submit(function (e) {
alert('监听到了表单的提交事件')
e.preventDefault()
})
// 第二种方式
$('#f1').on('submit', function (e) {
alert('监听到了表单的提交事件2')
e.preventDefault()
})
})
</script>
</body>
</html>
3.快速获取表单中的数据
serialize()函数
为了简化表单中数据的获取操作，jQuery 提供了 serialize()函数，其语法格式如下：
$(selector).serialize()
好处：可以一次性获取表单的数据
注意：在使用 serialize()函数快速获取表单数据时，必须为每个表单元素添加 name 属性
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form id="form1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">提交</button>
<script>
$('#form1').serialize()
// 调用的结果： username=用户名的值&password= 密码的值
</script>
</form>
</body>
</html>
获取表单数据的三种方式
第一种：$('#form').serialize();
第二种：$('#form').serializeArray();
- 注意：前两种方法都是jQuery提供的方法，能够收集普通表单数据，但不能收集文件上传的数据
.serialize()方法得到的是序列化之后的字符串，而serializeArray()返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个键值对——name参数和value参数
第三种：new FormData()
FormData是HTML5对象，目前可兼容大多主流的浏览器，但不兼容低版本IE浏览器。与普通的Ajax相比，使用FormData的最大优点就是可以异步上传二进制文件，FormData如果用于发送ajax上传则需要注意加processData: false,contentType: false
(三)案例-评论列表
1.UI结构搭建
步骤
- 评论面板结构
- 创建panel （快捷键：
bs3-panel:primary） - 修改title里面的标题
- 在body 里面 创建两个输入框，加上对应的文本提示
- 最下面加上一个 button（快捷键：
bs3-button:primary）
- 创建panel （快捷键：
- 评论列表结构
- 构建一个
list列表（快捷键：bs3-list-group） - 在第一个
li里面放两个span，写入 评论时间和评论人
- 构建一个
结构代码：
<body style="padding: 15px;">
<!-- 评论面板 -->
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">发表评论</h3>
</div>
<form class="panel-body" id="formAddCmt">
<div>评论人：</div>
<input type="text" class="form-control" name="username" autocomplete
最低0.47元/天 解锁文章
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
