Form表单使⽤、ajax解决表单提交后页⾯跳转数据丢失的问题
⼀、Form表单基本使⽤
表单概念：在⽹页中主要负责数据采集功能。HTML中<form>标签，就是⽤于采集⽤户输⼊的信息，并通过 <form>标签的提交操作，把采集的信息提交到服务器端进⾏处理
表单的组成部分：
• 表单标签
• 表单域：包含了⽂本框，密码框，隐藏域，都⾏⽂本框，复选框，单选框，下拉选择框和⽂件上传框等等
• 表单按钮：通过设置type属性为submit来触发form表单的提交
<form> 标签的属性
action
action：属性⽤来规定当提交表单时，向何处发送表单数据
action 属性的值应该是后端提供的⼀个URL地址，这个URL地址专门负责接收表单提交过来的数据。
当 <form>表单在未制定 action 属性值的情况下，action的默认值为当前页⾯的 URL 地址
html中提交表单用什么属性注意: 当提交表单后，会⽴即跳转到 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 >
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" >评论时间：</span>
37<span class="badge" >评论⼈：</span>
38      Item 1
39</li>
40</ul>
41
42</body>
43
44</html>
cmt.js⽂件
1 $(function () {
2// 获取图书列表数据
3function getNewsList() {
4    $.ajax({
5      type: "GET",
6      url: "p:3006/api/cmtlist",
7      success: function (res) {
8if (res.status !== 200) return alert("获取图书列表失败！！");
9// 获取图书成功
10// 把数据渲染到页⾯
11var rows = [];
12        $.each(res.data, function (i, item) {
13var str = `<li class="list-group-item">
14        <span class="badge" >评论时间：${item.time}</span>
15        <span class="badge" >评论⼈：${item.username}</span>
16        ${t}
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// ⼀次性获取表单的数据
30var data = $(this).serialize();
31    $.ajax({
32      type: "POST",
33      url: "p:3006/api/addcmt",
34      data,
35      success: function (res) {
36if (res.status !== 200) return alert("发表评论列表失败");
37        getNewsList();
38//重置表单
39// $("#formAddCmt")[0]转换成原⽣DOM
40        $("#formAddCmt")[0].reset();
41      },
42    });
43  });
44 });

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。