前端_网页编程 Form表单与模板引擎（上）

Myth丶恋晨 2022-11-27 12:11 191阅读 0赞

### 目录 ###

*  一、form表单的基本使用
 *   *  1. 什么是表单？
     *  2. 表单的组成部分
     *  3. < form>标签的基本属性
     *   *  3.1 action
         *  3.2 target
         *  3.3 method
         *  3.4 enctype
     *  4. 表单的同步提交及缺点
     *   *  4.1 什么是表单的同步提交
         *  4.2 表单同步提交的缺点
         *  4.3 如何解决表单同步提交的缺点
 *  二、通过Ajax提交表单数据
 *   *  1.监听表单提交事件
     *  2. 阻止表单默认提交行为
     *  3. 快速获取表单中的数据
     *   *  3.1 serialize()函数
         *  3.2 serialize()函数示例
 *  三.案例 - 评论列表
 *   *  1. 渲染UI结构
     *   *  1.1 文件准备
         *  1.2 代码书写
         *   *  1.2.1 在HTML文件中引入 bootstrap 和 jQurey文件：
             *  1.2.2 在< body>< /body> 内部创建评论面板和评论列表
     *  2. 获取评论列表
     *  3. 发表评论
     *   *  3.1 改造form表单
         *  3.2 发表评论代码
         *  3.3 最终案例效果
 *  总结
 *   *  1. 问题点
     *  2. 解决办法

--------------------

**注**：`form` 元素是块级元素，其前后会产生折行。

# 一、form表单的基本使用 #

## 1. 什么是表单？ ##

表单在网页中主要负责数据采集功能。HTML中的 `< form>` 标签，就是用于采集用户输入的信息，并通过`< form>`标签的提交操作，**把采集到的信息提交到服务器端**进行处理。。

常见的表单样式：  
![在这里插入图片描述][20200815142741473.png_pic_left]  
 常见基本元素的示例代码：

## 2. 表单的组成部分 ##

表单由三个基本部分组成：

*  表单标签；
 *  表单域；
 *  表单按钮。

## 3. < form>标签的基本属性 ##

< form>标签用来采集数据，`< form>`标签的属性则是用来规定 **如何把采集到的数据发送到服务器**。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>action</td> 
   <td align="left">URL地址</td> 
   <td align="left">规定当提交表单时，向何处发送表单数据</td> 
  </tr> 
  <tr> 
   <td>method</td> 
   <td align="left">get 或 post</td> 
   <td align="left">规定以何种方式把表单数据提交到 action URL</td> 
  </tr> 
  <tr> 
   <td>enctype</td> 
   <td align="left">application/x-www-form-urlencoded、multipart/form-data、text/plain</td> 
   <td align="left">规定在发送表单数据之前如何对其进行编码</td> 
  </tr> 
  <tr> 
   <td>target</td> 
   <td align="left">_blank、_self、_parent、_top、framename</td> 
   <td align="left">规定在何处打开 action URL</td> 
  </tr> 
 </tbody> 
</table>

### 3.1 action ###

`action` 属性用来规定当提交表单时，向何处发送表单数据。  
`action` 属性的值应该是后端提供的一个 URL 地址，这个 URL 地址专门负责接收表单提交过来的数据。  
当 表单在未指定 `action` 属性值的情况下，`action` 的默认值为当前页面的 URL 地址。

注意：当提交表单后，页面会立即跳转到 action 属性指定的 URL 地址。

### 3.2 target ###

**target** 属性用来规定在何处打开 `action URL`。  
它的可选值有**5**个，默认情况下，target 的值是 `_self`，表示在相同的框架中打开 `action URL`(即同一页面)。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><font><code>_blank</code></font></td> 
   <td align="left"><font>在新窗口中打开。</font></td> 
  </tr> 
  <tr> 
   <td align="left"><font><code>_self</code></font></td> 
   <td align="left"><font>默认。在相同的框架中打开。</font></td> 
  </tr> 
  <tr> 
   <td align="left"><code>_parent</code></td> 
   <td align="left">在父框架集中打开。（不常用）</td> 
  </tr> 
  <tr> 
   <td align="left"><code>_top</code></td> 
   <td align="left">在整个窗口中打开。（不常用）</td> 
  </tr> 
  <tr> 
   <td align="left"><code>framename</code></td> 
   <td align="left">在指定的框架中打开。（不常用）</td> 
  </tr> 
 </tbody> 
</table>

### 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，表示在**发送前编码所有的字符**。

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>application/x-www-form-urlencoded</code></td> 
   <td align="left">在发送前编码所有字符 <strong>（默认）</strong></td> 
  </tr> 
  <tr> 
   <td align="left"><code>multipart/form-data</code></td> 
   <td align="left">不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。</td> 
  </tr> 
  <tr> 
   <td align="left"><code>text</code> / <code>plain</code></td> 
   <td align="left">空格转换为 “+” 加号，但不对特殊字符编码。（很少用）</td> 
  </tr> 
 </tbody> 
</table>

**注意：**  
在涉及到 **文件上传** 的操作时，**必须**将 `enctype` 的值设置为 `multipart/form-data`；  
如果表单的提交不涉及到文件上传操作，则直接将 `enctype` 的值设置为 `application/x-www-form-urlencoded` 即可！

## 4. 表单的同步提交及缺点 ##

### 4.1 什么是表单的同步提交 ###

通过点击 `submit` 按钮，触发表单提交的操作，从而使页面跳转到 `action` `URL` 的行为，叫做表单的**同步提交**。

### 4.2 表单同步提交的缺点 ###

< form>表单同步提交后，整个页面会发生跳转，**跳转到 action URL 所指向的地址**，用户体验很差。  
< form>表单同步提交后，**页面之前的状态和数据会丢失**。

### 4.3 如何解决表单同步提交的缺点 ###

如果使用表单提交数据，则会导致以下两个问题：

1.  页面会发生跳转
2.  页面之前的状态和数据会丢失

**解决方案**：**表单只负责采集数据，Ajax 负责将数据提交到服务器**。

--------------------

# 二、通过Ajax提交表单数据 #

## 1.监听表单提交事件 ##

在 `jQuery` 中，可以使用如下两种方式，监听到表单的提交事件：

方式一、代码如下：

$('#form1').submit(function(e) { 
       alert('监听到了表单的提交事件')
    })

方式二、代码如下：

$('#form1').on('submit', function(e) { 
       alert('监听到了表单的提交事件')
    })

## 2. 阻止表单默认提交行为 ##

当监听到表单的提交事件以后，可以调用事件对象的 `event.preventDefault()` 函数，来阻止表单的提交和页面的跳转。  
方式一、代码如下（示例）：

$('#form1').submit(function(e) { 
       // 阻止表单的提交和页面的跳转
       e.preventDefault()
    })

方式二、代码如下（示例）：

$('#form1').on('submit', function(e) { 
       // 阻止表单的提交和页面的跳转
       e.preventDefault()
    })

## 3. 快速获取表单中的数据 ##

### 3.1 serialize()函数 ###

为了简化表单中数据的获取操作，`jQuery` 提供了 `serialize()` 函数，其语法格式如下：

$(selector).serialize()

`serialize()` 函数的**好处**：可以 **一次性** 获取到表单中的所有的数据。

### 3.2 serialize()函数示例 ###

**HTML结构**（示例）：

**JavaScript代码**（示例）：

$('#form1').serialize()
    // 调用的结果：
    // username=用户名的值&password=密码的值

**注意**：在使用 `serialize()` 函数快速获取表单数据时，**必须为每个表单元素添加 name 属性** ！

--------------------

# 三.案例 - 评论列表 #

## 1. 渲染UI结构 ##

**最终效果展示：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]

### 1.1 文件准备 ###

*  新建lib文件夹，放入`bootstrap.css` 和`jQurey.js`文件
 *  新建HTML文件

### 1.2 代码书写 ###

#### 1.2.1 在HTML文件中引入 bootstrap 和 jQurey文件： ####

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./lib/bootstrap.css">
        <script src="./lib/jquery.js"></script>
    </head>

#### 1.2.2 在< body>< /body> 内部创建评论面板和评论列表 ####

**1）快速生成评论面板**  
在vs code编辑器中，输入`bs3-panel`快捷指令，在弹出的代码框中选择 bs3-panle: primary，生成一个primary主题的样式面板。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]

*  采用行内样式再给**body**加一个外边距：`<body style="padding:15px">`
 *  将默认生成的标签文字“*Panel title*”修改为“发表评论”；
 *  在类名为class=“panel-body” 的div盒子里，需要创建三个部分的结构：评论人、评论内容、发表评论。  
    ![在这里插入图片描述][20200815173849461.png_pic_center]  
    **2）评论面板制作**  
    在 panel-body 这个div盒子内部，创建评论人、评论内容、发表评论等子元素。

**HTML结构代码**（如下）：

<div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
            </div>
            <div class="panel-body">
                <div>评论人：</div>
                <input type="text" class="form-control">
                <div>评论内容：</div>
                <textarea class="form-control"></textarea>
                <button type="submit" class="btn btn-primary">发表评论</button>
            </div>
        </div>

**效果**：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left]  
**3）评论列表区**  
在vs code编辑器中，输入`bs3-list`快捷指令，在弹出的代码框中选择 bs3-list-group:badges，生成主题列表样式。  
**注**：badges这个类，本身具有`float:right`的样式属性。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 1]  
将自动生成的`ul`中的3个小`li`中的两个删除，剩下的小`li`中，复制`span` ，做两个`span`标签写上评论人、评论时间。剩下的后面再来捣鼓样式：

目前呈现的效果样式如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 2]  
效果中的“评论人”和”评论时间“与HTML代码中的顺序不一致，是由于右浮动造成的，将两个span标签互换位置解决。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 3]  
为 评论人 和 评论时间 标签设置分别设置背景色 \#5BC0DE、\#F0AD4E：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 4]

## 2. 获取评论列表 ##

给评论列表HTML里的`ul`添加 `id = "cmt-list"`

function getCmtList() { 
        $.get('http://www.liulongbin.top:3006/api/cmtlist', function (res) {   
          if(res.status !== 200) { 
            return alert('获取评论列表失败！')
          }
          var rows = []
          $.each(res.data, function (i, item) {  // 循环拼接字符串
            rows.push('<li class="list-group-item">'+ item.content +'<span class="badge cmt-date">评论时间：'+ item.time +'</span><span class="badge cmt-person">评论人：'+ item.username +'</span></li>')
          })
          $('#cmt-list').empty().append(rows.join('')) // 渲染列表的UI结构
        })
      }

## 3. 发表评论 ##

### 3.1 改造form表单 ###

首先将原HTML结构中发表评论模块中的外层div盒子，改为`form`标签，同时给`input`、`textarea`标签添加`name`属性（否则获取不到元素和值）。

**接口文档：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 5]

### 3.2 发表评论代码 ###

**1）获取元素**  
经查阅接口文档，要求传递的两个参数为`username`、`content`，因此，确定这里的name属性应与接口文档中的保持一致。

<form class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">发表评论</h3>
            </div>
            <div class="panel-body">
                <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>
            </div>
    	</form>

**2） 获取评论列表函数**

// 获取评论列表
    function getCommentList() { 
        $.ajax({ 
            method: 'GET',
            url: 'http://www.liulongbin.top:3006/api/cmtlist',
            // 由于接口文档中不要求跟参数，因此这里放一个空数组
            // data: {}, // 或者直接删掉也可以
            success: function(res) { 
                if (res.status !== 200) return alert("获取评论列表失败！")
                var rows = [];
                $.each(res.data, function(i, item) {   // 循环拼接字符串
                    var str = '<li class="list-group-item"> <span class="badge" style="background-color: #F0AD4E;">评论时间：' + item.time + '</span> <span class="badge" style="background-color:#5BC0DE;">评论人：' + item.username + '</span>' + item.content + ' </li>'
                    rows.push(str);
                })
                // 渲染列表的UI结构
                $('#cmt-list').empty().append(rows.join(''));
            }
    
        })
    }

**3）发表评论**

$(function() { 
        // 发表评论
        $('#formAddCmt').submit(function(e) { 
            // 阻止默认行为
            e.preventDefault();
            // 快速获取表单中填写的内容
            var data = $(this).serialize();
            // 发起请求
            $.post('http://www.liulongbin.top:3006/api/addcmt', data, function(res) { 
                if (res.status !== 201) return alert('发表评论失败！')
                    // 评论成功，刷新页面
                getCommentList();
                // 快速重置（清空）form表单内容(无需获取每个元素去做清空)
                $('#formAddCmt')[0].reset()
            })
        });
    })

**注：** 这里把**jQurey对象**转换为 **原生的DOM对象**，方法是在获取的`jQurey对象`后调用`[0]`，抽取并示例如下：

$('#formAddCmt')[0]

这样，即可使用原生JavaScript form表单函数reset()（批量重置清空form表单元素中的内容）。

// 清空form表单内容
    $('#formAddCmt')[0].reset()

### 3.3 最终案例效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]

--------------------

# 总结 #

案例总结：

## 1. 问题点 ##

案例中是采用 **字符串拼接** 的形式，来渲染**UI**结构。  
如果UI结构比较复杂，则拼接字符串的时候需要格外注意 **引号之前的嵌套** 。且一旦需求发生变化，**修改起来也非常麻烦**，不利于后期的维护。

## 2. 解决办法 ##

这里就不得不提 **模板引擎**，它能较好解决字符串的拼接问题。  
**模板引擎**，顾名思义，它可以根据程序员指定的 **模板结构** 和 **数据**，自动生成一个完整的HTML页面。

--------------------

~~ 本文到此结束，下一篇将完整介绍模板引擎的相关知识点和具体使用

下一篇：[前端\_网页编程 Form表单与模板引擎（中）][Form]

[20200815142741473.png_pic_left]: /images/20221124/27ea8d4e542244deb677b11b42740d32.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/28e6199ea1c74972b4e4eefed389963c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/730ceacb841c4c4593bb554988a737bc.png
[20200815173849461.png_pic_center]: /images/20221124/ef25c71a7e0948038551fdaf0d79fe47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left]: /images/20221124/c99d2eee1a274c20bef16f5b94f6f84e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221124/2f1e3215e59946f3b23f6a06dedf07de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 2]: /images/20221124/cef2e2c1d1d940d1bc44dad4c3c2ae2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 3]: /images/20221124/d432c681626f4324ae6aa231a8bb99db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 4]: /images/20221124/53b1152bce1e4f959245114ce829ab25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_left 5]: /images/20221124/e0070a34b13e41d0b07bc832176d7cd0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/077e7f504cf244ac97777c9a112aca66.png
[Form]: https://blog.csdn.net/zglibk/article/details/108048255