Form表單使用、ajax解決表單提交後頁面跳轉資料丟失的問題缺點
阿新 • • 發佈：2021-10-19
注意：
-
get 方式適合用來提交少量的，簡單的資料
-
post 方式適合用來提交大量的，複雜的，或包含檔案上傳
-
-
<form>表單同步提交後，頁面之前的狀態和資料會丟失
示例程式碼：
溫馨提示：案例中引入的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 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" 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" 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 });