一、Form表单基本使用
表单概念：在网页中主要负责 数据采集功能。HTML中<form>标签，就是用于采集用户输入的信息，并通过 <form>标签的提交操作，把采集的信息提交到服务器端进行处理
表单的组成部分：
• 表单标签
• 表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等
• 表单按钮：通过设置type属性为submit来触发form表单的提交
<form> 标签的属性
action
action：属性用来规定当提交表单时，向何处发送表单数据
action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。
当 <form>表单在未制定 action 属性值的情况下，action的默认值为当前页面的 URL 地址
注意: 当提交表单后，会立即跳转到 action 属性指定的 URL 地址
target
target 属性用来规定 在何处打开 action URL
它的可选值有5个，默认情况下，target的值是 _self，表示在相同的框架中打开 action URL
method
method 属性用来规定 以何种方式 把表单数据提交到 action URL
它的可选值有两个，分别是 get 和 post
默认情况下，method的值为 get， 表示通过URL地址的形式，把表单数据提交到 action URL
注意：
-
get 方式适合用来提交少量的，简单的数据
-
post 方式适合用来提交大量的，复杂的，或包含文件上传的数据
enctype
enctype属性用来规定在 发送表单数据之前如何对数据进行编码
可选值有三个，默认情况下，enctype的值为 application/x-www-form-urlencoded，表示在发送前编码的所有字符
表单的同步提交及缺点
什么是表单的同步提交
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到 action URL 的行为，叫做表单的同步提交
表单同步提交的缺点
-
<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差 -
<form>表单同步提交后，页面之前的状态和数据会丢失
如何解决呢？
表单只复杂采集数据，Ajax负责将数据提交到服务器
二、通过Ajax提交表单数据
监听表单提交事件
在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件
阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转
如何快速获取表单数据
serialize() 函数
为了简化表单中数据的获取操作，jQuery提供了 serialize() 函数，语法格式如下：
好处：可以一次性获取表单的数据
示例代码：
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性
示列如下：
温馨提示：案例中引入的bootstrap.css、jquery.js，可自行去官网下载后再引入使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <link rel="stylesheet" href="./lib/bootstrap.css" /> 10 <script src="./lib/jquery.js"></script> 11 <script src="./js/cmt.js"></script> 12 </head> 13 14 <body style="padding: 15px;"> 15 16 <!-- 评论面板 --> 17 <div class="panel panel-primary"> 18 <div class="panel-heading"> 19 <h3 class="panel-title">发表评论</h3> 20 </div> 21 <!-- 1 div改造成form标签并起个名字 2 监听表单的提交submit 3 serilize()用来获取表单数据 --> 22 <form class="panel-body" id="formAddCmt"> 23 <div>评论人：</div> 24 <input type="text" class="form-control" name="username" autocomplete="off" /> 25 <div>评论内容：</div> 26 <textarea class="form-control" name="content"></textarea> 27 28 <button type="submit" class="btn btn-primary">发表评论</button> 29 </form> 30 </div> 31 32 33 <!-- 评论列表 --> 34 <ul class="list-group" id="cmt-list"> 35 <li class="list-group-item"> 36 <span class="badge" style="background-color: #F0AD4E;">评论时间：</span> 37 <span class="badge" style="background-color: #5BC0DE;">评论人：</span> 38 Item 1 39 </li> 40 </ul> 41 42 </body> 43 44 </html>
cmt.js文件
1 $(function () {
2 // 获取图书列表数据
3 function getNewsList() {
4 $.ajax({
5 type: "GET",
6 url: "http://www.liulongbin.top:3006/api/cmtlist",
7 success: function (res) {
8 if (res.status !== 200) return alert("获取图书列表失败！！");
9 // 获取图书成功
10 // 把数据渲染到页面
11 var rows = [];
12 $.each(res.data, function (i, item) {
13 var str = `<li class="list-group-item">
14 <span class="badge" style="background-color: #F0AD4E;">评论时间：${item.time}</span>
15 <span class="badge" style="background-color: #5BC0DE;">评论人：${item.username}</span>
16 ${item.content}
17 </li>`;
18 rows.push(str);
19 });
20 $("#cmt-list").empty().append(rows.join(""));
21 },
22 });
23 }
24 getNewsList();
25 // 表单功能
26 $("#formAddCmt").on("submit", function (e) {
27 //阻止表单默认提交行为
28 e.preventDefault();
29 // 一次性获取表单的数据
30 var data = $(this).serialize();
31 $.ajax({
32 type: "POST",
33 url: "http://www.liulongbin.top:3006/api/addcmt",
34 data,
35 success: function (res) {
36 if (res.status !== 200) return alert("发表评论列表失败");
37 getNewsList();
38 //重置表单
39 // $("#formAddCmt")[0]转换成原生DOM
40 $("#formAddCmt")[0].reset();
41 },
42 });
43 });
44 });