前端_网页编程 Form表单与模板引擎（上）
目錄
- 一、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>標簽的提交操作，把采集到的信息提交到服務器端進行處理。。
常見的表單樣式：
常見基本元素的示例代碼：
2. 表單的組成部分
表單由三個基本部分組成：
- 表單標簽；
- 表單域；
- 表單按鈕。
3. < form>標簽的基本屬性
< form>標簽用來采集數據，< form>標簽的屬性則是用來規定 如何把采集到的數據發送到服務器。
| action | URL地址 | 規定當提交表單時，向何處發送表單數據 |
| method | get 或 post | 規定以何種方式把表單數據提交到 action URL |
| enctype | application/x-www-form-urlencoded、multipart/form-data、text/plain | 規定在發送表單數據之前如何對其進行編碼 |
| target | _blank、_self、_parent、_top、framename | 規定在何處打開 action URL |
3.1 action
action 屬性用來規定當提交表單時，向何處發送表單數據。
action 屬性的值應該是后端提供的一個 URL 地址，這個 URL 地址專門負責接收表單提交過來的數據。
當 表單在未指定 action 屬性值的情況下，action 的默認值為當前頁面的 URL 地址。
注意：當提交表單后，頁面會立即跳轉到 action 屬性指定的 URL 地址。
3.2 target
target 屬性用來規定在何處打開 action URL。
它的可選值有5個，默認情況下，target 的值是 _self，表示在相同的框架中打開 action URL(即同一頁面)。
| _blank | 在新窗口中打開。 |
| _self | 默認。在相同的框架中打開。 |
| _parent | 在父框架集中打開。（不常用） |
| _top | 在整個窗口中打開。（不常用） |
| framename | 在指定的框架中打開。（不常用） |
3.3 method
method 屬性用來規定 以何種方式 把表單數據提交到 action URL。
它的可選值有兩個，分別是 get 和 post。
默認情況下，method 的值為 get，表示通過 URL地址 的形式，把表單數據提交到 action URL。
示例代碼（如下）：
<form action="" target="_blank" method="POST"><input type="text" name="email_or_mobile"><input type="password" name="password"><button type="submit">提交</button> </form>注意：
- get 方式適合用來提交少量的、簡單的數據（非隱秘數據）。
- post 方式適合用來提交大量的、復雜的、關鍵的或包含文件上傳的數據（隱蔽式提交，提高數據提交時的安全性）。
在實際開發中， 表單的 post 提交方式用的最多，很少用 get。例如登錄、注冊、添加數據 等表單操作，都需要使用 post 方式來提交表單。
3.4 enctype
enctype 屬性用來規定在 發送表單數據之前如何對數據進行編碼。
它的可選值有三個，默認情況下，enctype 的值為 application/x-www-form-urlencoded，表示在發送前編碼所有的字符。
| application/x-www-form-urlencoded | 在發送前編碼所有字符 （默認） |
| multipart/form-data | 不對字符編碼。在使用包含文件上傳控件的表單時，必須使用該值。 |
| text / plain | 空格轉換為 “+” 加號，但不對特殊字符編碼。（很少用） |
注意：
在涉及到 文件上傳 的操作時，必須 將 enctype 的值設置為 multipart/form-data；
如果表單的提交不涉及到文件上傳操作，則直接將 enctype 的值設置為 application/x-www-form-urlencoded 即可！
4. 表單的同步提交及缺點
4.1 什么是表單的同步提交
通過點擊 submit 按鈕，觸發表單提交的操作，從而使頁面跳轉到 action URL 的行為，叫做表單的同步提交。
4.2 表單同步提交的缺點
< form>表單同步提交后，整個頁面會發生跳轉， 跳轉到 action URL 所指向的地址 ，用戶體驗很差。
< form>表單同步提交后， 頁面之前的狀態和數據會丟失。
4.3 如何解決表單同步提交的缺點
如果使用表單提交數據，則會導致以下兩個問題：
解決方案：表單只負責采集數據，Ajax 負責將數據提交到服務器。
二、通過Ajax提交表單數據
1.監聽表單提交事件
在 jQuery 中，可以使用如下兩種方式，監聽到表單的提交事件：
方式一、代碼如下：
$('#form1').submit(function(e) {alert('監聽到了表單的提交事件') })方式二、代碼如下：
$('#form1').on('submit', function(e) {alert('監聽到了表單的提交事件') })2. 阻止表單默認提交行為
當監聽到表單的提交事件以后，可以調用事件對象的 event.preventDefault() 函數，來阻止表單的提交和頁面的跳轉。
方式一、代碼如下（示例）：
方式二、代碼如下（示例）：
$('#form1').on('submit', function(e) {// 阻止表單的提交和頁面的跳轉e.preventDefault() })3. 快速獲取表單中的數據
3.1 serialize()函數
為了簡化表單中數據的獲取操作，jQuery 提供了 serialize() 函數，其語法格式如下：
$(selector).serialize()serialize() 函數的好處：可以 一次性 獲取到表單中的所有的數據。
3.2 serialize()函數示例
HTML結構（示例）：
<form id="form1"><input type="text" name="username" /><input type="password" name="password" /><button type="submit">提交</button> </form>JavaScript代碼（示例）：
$('#form1').serialize() // 調用的結果： // username=用戶名的值&password=密碼的值注意：在使用 serialize() 函數快速獲取表單數據時，必須為每個表單元素添加 name 屬性 ！
三.案例 - 評論列表
1. 渲染UI結構
最終效果展示：
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主題的樣式面板。
- 采用行內樣式再給body加一個外邊距：<body style="padding:15px">
- 將默認生成的標簽文字“Panel title”修改為“發表評論”；
- 在類名為class=“panel-body” 的div盒子里，需要創建三個部分的結構：評論人、評論內容、發表評論。
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>效果：
3）評論列表區
在vs code編輯器中，輸入bs3-list快捷指令，在彈出的代碼框中選擇 bs3-list-group:badges，生成主題列表樣式。
注：badges這個類，本身具有float:right的樣式屬性。
將自動生成的ul中的3個小li中的兩個刪除，剩下的小li中，復制span ，做兩個span標簽寫上評論人、評論時間。剩下的后面再來搗鼓樣式：
目前呈現的效果樣式如下
效果中的“評論人”和”評論時間“與HTML代碼中的順序不一致，是由于右浮動造成的，將兩個span標簽互換位置解決。
為 評論人 和 評論時間 標簽設置分別設置背景色 #5BC0DE、#F0AD4E：
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屬性（否則獲取不到元素和值）。
接口文檔：
3.2 發表評論代碼
1）獲取元素
經查閱接口文檔，要求傳遞的兩個參數為username、content，因此，確定這里的name屬性應與接口文檔中的保持一致。
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 最終案例效果
總結
案例總結：
1. 問題點
案例中是采用 字符串拼接 的形式，來渲染UI結構。
如果UI結構比較復雜，則拼接字符串的時候需要格外注意 引號之前的嵌套 。且一旦需求發生變化，修改起來也非常麻煩，不利于后期的維護。
2. 解決辦法
這里就不得不提 模板引擎，它能較好解決字符串的拼接問題。
模板引擎，顧名思義，它可以根據程序員指定的 模板結構 和 數據，自動生成一個完整的HTML頁面。
~~ 本文到此結束，下一篇將完整介紹模板引擎的相關知識點和具體使用
下一篇：前端_網頁編程 Form表單與模板引擎（中）
總結
以上是生活随笔為你收集整理的前端_网页编程 Form表单与模板引擎（上）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2. 字节码指令
- 下一篇： 前端_网页编程 跨域与JSONP- 淘宝