一、Form表单的基本使用
1、什么是表单
表单在网页中主要负责 数据采集功能 。HTML中<form>标签，就是用于采集用户输入的信息，并通过 <form> 标签的提交操作，把采集的信息提交到服务器端进行处理
2、表单的组成部分
表单由三个基本部分组成：
- 表单标签
- 表单域：包含了文本框，密码框，隐藏域，都行文本框，复选框，单选框，下拉选择框和文件上传框等等
- 表单按钮：通过设置
type属性为submit来触发form表单的提交
3、<form> 标签的属性
<from> 标签用来采集数据，<from> 标签的属性则是用来规定 如何把采集到的数据发送到服务器
| 属性 | 值 | 描述 |
| action | URL 地址 | 规定当提交表单时，向何处发送表单数据 |
| method | get 或者 post | 规定以何种方式把表单数据提交到 action 提供的 URL 地址中 |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain |
规定在发送表单数据之前如何对其进行编码 |
| target | _blank_self_parent_topframename |
规定在何处打开 action URL |
- action
action 属性用来规定当提交表单时，向何处发送表单数据。
action 属性的值应该是后端提供的一个URL地址，这个URL地址专门负责接收表单提交过来的数据。
当 <form>表单在未指定 action 属性值的情况下，action的默认值为当前页面的 URL 地址
注意: 当提交表单后，会立即跳转到 action 属性指定的 URL 地址
- target
target 属性用来规定 在何处打开 action URL
它的可选值有5个，默认情况下，target的值是 _self，表示在相同的框架中打开 action URL
| 值 | |
_blank |
提交时在新的窗口打开 |
_slef |
默认值，在本窗口打开 |
_parent |
在父框架集中打开（很少用） |
_top |
在整个窗口中打开（很少用） |
| framename | 在指定的框架中打开（很少用） |
- method
method 属性用来规定 以何种方式 把表单数据提交到 action URL
它的可选值有两个，分别是 get 和 post
默认情况下，method的值为 get， 表示通过URL地址的形式，把表单数据提交到 action URL
注意：
- get 方式适合用来提交少量的，简单的数据
- post 方式适合用来提交大量的，复杂的，或包含文件上传的数据
- enctype
enctype属性用来规定在 发送表单数据之前如何对数据进行编码
它的可选值有三个，默认情况下，enctype的值为 application/x-www-form-urlencoded，表示在发送前编码的所有字符
| 值 | 描述 |
| application/x-www-form-urlencoded | 在发送前编码所有字符（默认） |
| multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值 |
| text/plain | 空格转换为 “+” 加号，但不对特殊字符编码（很少用） |
注意：
1、在涉及到 文件上传 的操作时，必须 将 enctype 的值设置为 multipart/form-data
2、如果表单提交不涉及到文件上传操作，则直接将 enctype 的值设置为 application/x-www-form-urlencoded 即可
4、表单的同步提交及缺点
- 什么是表单的同步提交
通过点击 submit 按钮，触发表单提交的操作，从而使页面跳转到action URL的行为，叫做表单的同步提交 - 表单同步提交的缺点
<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差<form>表单同步提交后，页面之前的状态和数据会丢失
- 如何解决
表单只负责采集数据，Ajax负责将数据提交到服务器
二、通过Ajax提交表单数据
1、监听表单提交事件
在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件
代码：
// 第一种方式 $('#f1').submit(function () { alert('监听到了表单的提交事件') }) // 第二种方式 $('#f1').on('submit', function () { alert('监听到了表单的提交事件2') })
2、阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转
代码：
// 第一种方式 $('#f1').submit(function (e) { alert('监听到了表单的提交事件') e.preventDefault() }) // 第二种方式 $('#f1').on('submit', function (e) { alert('监听到了表单的提交事件2') e.preventDefault() })
3、如何快速获取表单数据
为了简化表单中数据的获取操作，jQuery提供了 serialize() 函数
语法：
$(selector).serialize()
好处：可以一次性获取表单的数据
代码：
// html 结构 <form action="/login" id="f1"> <input type="text" name="user_name" /> <input type="password" name="password" /> <button type="submit">提交</button> </form> // js $(function () { $("#f1").submit(function (e) { e.preventDefault(); let data = $(this).serialize(); console.log(data); }); });
注意：在使用 serialize() 函数快速获取表单数据时， 必须为每个表单元素添加 name 属性
三、案例 - 评论列表
- 效果图
- UI 结构搭建
步骤：
- 评论面板结构
- 创建panel （快捷键：
bs3-panel:primary） - 修改title里面的标题
- 在body 里面 创建两个输入框，加上对应的文本提示
- 最下面加上一个 button（快捷键：
bs3-button:primary）
- 评论列表结构
- 构建一个
list列表（快捷键：bs3-list-group） - 在第一个
li里面放两个span，写入 评论时间和评论人
代码：
<!-- 评论面板 --> <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" /> <div>评论内容：</div> <textarea class="form-control" name="content"></textarea> <button type="submit" class="btn btn-primary">发表评论</button> </form> </div> <!-- 评论列表 --> <ul class="list-group"> <li class="list-group-item"> <span class="badge" style="background: orange">评论时间：</span> <span class="badge" style="background: skyblue">评论人：</span> Item 1 </li> </ul>
- 获取评论列表数据
步骤：
- 定义函数来获取评论列表数据
getCommentList() - 查阅接口文档，关注请求
url，是否需要携带参数，请求方式 - 利用
$.ajax()来进行请求 - 在
success回调函数中，判断请求数据是否成功，如果状态码不是200，提示用户
代码：
let baseUrl = `http://www.liulongbin.top:3006`; // 获取评论列表 function getCommentList() { $.ajax({ method: "GET", url: baseUrl + "/api/cmtlist", data: {}, success: function (res) { if (res.status !== 200) { return alert("获取数据失败！"); } console.log(res.data); }); }
渲染评论列表
步骤：
- 创建一个空数组（
rows），用来存放每一个元素的html字符串结构 - 遍历服务器返回的数据，每遍历一次，拼接一个对应的
html字符串结构，然后放入到数组中 - 找到list容器，先清空一下里面内容，然后利用 append 添加新的数据
代码：
// 获取评论列表 function getCommentList() { $.ajax({ method: "GET", url: baseUrl + "/api/cmtlist", data: {}, success: function (res) { if (res.status !== 200) { return alert("获取数据失败！"); } console.log(res.data); let arr = res.data.slice(0, 5); let rows = []; $.each(arr, function (i, item) { rows.push( `<li class="list-group-item"> <span class="badge" style="background: orange;">评论时间：${item.time}</span> <span class="badge" style="background: skyblue;">评论人：${item.username}</span> ${item.content} </li>` ); }); $(".list-group").empty().append(rows.join("")); }, }); }
发表评论
- 改造form表单步骤：
- 把之前
panel-body的标签改成form标签 - 给每一个输入框设置
name属性，name属性的值最好与接口文档定义的参数名称一致
- 注册
sumbit事件，阻止表单提交的默认行为 - 获取用户输入内容（利用
serialize()）
代码：
// 发布评论 $("#formAddCmt").on("submit", function (e) { e.preventDefault(); let data = $(this).serialize(); });
完成发表功能
步骤：
- 查阅接口文档
- 利用
$.post()发送请求，传入数据 - 在成功回调函数里面判断 返回的
status是否是201，如果是代表成功，失败进行提示
- 刷新页面（调用
getCommentList()），清空表单内容（$('#formAddCmt')[0].reset()）
代码：
// 发布评论 $("#formAddCmt").on("submit", function (e) { e.preventDefault(); let data = $(this).serialize(); $.ajax({ method: "POST", url: baseUrl + "/api/addcmt", data, success: (res) => { if (res.status !== 201) { return alert("评论发布失败！"); } getCommentList(); console.log($(this)); $(this)[0].reset(); }, }); });
四、模板引擎的基本概念
1、渲染 UI 结构时遇到的问题
以前都是通过 拼接字符串 或是 模版字符串 的形式来渲染 UI 结构，这样操作是比较麻烦的，而且很容易出现问题
如果 UI 结构比较复杂，则拼接字符串的时候需要格外注意 引号之前的嵌套 。且一旦需求发生变化，修改起来也非常麻烦
2、什么是模板引擎
模板引擎，它可以根据程序员指定的 模板结构 和 数据，自动生成一个完整的HTML页面
3、使用模板引擎的好处
- 减少了字符串的拼接操作
- 使代码结构更清晰
- 使代码更易于阅读与维护
