表单使用和ajax解决了表单提交后页面跳转数据丢失的问题。

一、Form表单基本使用

表单概念:在网页中，他主要负责数据采集功能。HTML中的表单标签，用于收集用户输入的信息，并通过表单标签的提交操作将收集到的信息提交给服务器进行处理。

表单的组成部分：

？表单标签

？表单域：包括文本框、密码框、隐藏域、全行文本框、复选框、单选框、下拉选择框、文件上传框等。

？按钮：通过将type属性设置为submit来触发表单表单的提交。

form 标签的属性

action

action：属性用于在提交表单时指定向何处发送表单数据。

action的值应该是后端提供的URL地址，后端专门负责接收表单提交的数据。

当表格在未制定 ,action和 属性值,action的默认值为当前页面的 URL 地址.时

请注意，:将在提交表单后立即跳转到由action属性指定的URL地址。

target

target属性用于指定打开操作URL的位置。

它有五个可选值。默认情况下，target的值为_self，这意味着动作URL在同一个框架中打开。

method

method 属性用于指定以何种方式向操作URL提交表单数据。

它有两个可选值，即get和post。

默认情况下，方法的值为get，这意味着表单数据以URL地址的形式提交给动作URL。

注意：

Get方法适用于提交少量的和简单的.的数据

帖子适合提交来自大量的,复杂的或文件上传.的数据

enctype

Enctype属性用于指定在 发送表单数据之前如何对数据进行编码.

有三个可选值。默认情况下，enctype为application/x-www-form-URL encoded，这意味着发送前对所有字符进行了编码。

s">表单的同步提交及缺点

什么是表单的同步提交

通过点击 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   titleDocument/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" 
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" 
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 });