前端笔记-freemarker模板获取后端数据及提交数据
生活随笔
收集整理的這篇文章主要介紹了
前端笔记-freemarker模板获取后端数据及提交数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
?
基本概念
代碼與實例
?
基本概念
這里有如下頁面：
這里面表單的數據都是從后端獲取的，點獲取數據，會調用getRecord方法從數據庫獲取數據。
點擊提交備注，是備注可以讓用戶填寫。
提交后，更新數據庫中的數據。
在freemarker中使用${xxxx}，這種方式獲取單條的數據。
?
?
代碼與實例
前端代碼如下：
<!DOCTYPE html> <head><meta charset="UTF-8" /><link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"><title>數據獲取頁面</title> </head> <body> <br> <br> <br> <br> <div class="m-container m-padded-tb-big doubling"><div class="ui container doubling"><div class="ui row"><div class="seven wide column doubling"><div class="ui top attached segment"><div class="ui header">獲取數據</div></div><div class="ui attached segment "><form id="webDataForm" name="webDataForm" method="post" action="/getRecord"><div class="ui labeled left icon input" style="width: 100%"><i class="computer icon"></i><input id="userName" readonly="true" type="text" name="userName" placeholder="1568452****" value=${userName}><a class="ui tag label">用戶名</a></div><br><br><div class="ui labeled left icon input" style="width: 100%"><i class="briefcase icon"></i><input id="password" readonly="true" type="text" name="password" placeholder="1A2B3C4D5E6F7G!*(41@" value=${password}><a class="ui tag label">密碼</a></div><br><br><div class="ui labeled left icon input" style="width: 100%"><i class="eyedropper icon"></i><input id="createTime" readonly="true" type="text" name="createTime" placeholder="1A2B3C4D5E6F7G!*(41@" value=${createTime}><a class="ui tag label">創建時間</a></div><br><br><div class="ui labeled left icon input" style="width: 100%"><i class="calendar icon"></i><input id="remarks" type="text" name="remarks" placeholder="如：可以使用，或者用戶名錯誤，或者密碼錯誤" value=${remarks}><a class="ui tag label">備注</a></div><br><br><div class="ui padded grid"><div class="white row"><div class="column"><h2 class="ui header">注意</h2><p>成功獲取帳號后，需要填寫備注信息，隨后點擊提交備注按鈕，避免下次獲取同樣的帳號</p></div></div><div class="two column row"><div class="white column"><button class="fluid ui teal button" type="submit">點擊獲取數據</button></div><div class="two column column"><button class="fluid ui teal button" onclick="updateWebData()">點擊提交備注</button></div></div></div></form></div></div></div></div> </div><script>function updateWebData() {for(var i=0; i<document.webDataForm.elements.length - 2; i++){if(document.webDataForm.elements[i].value==""){console.log(i);alert("當前表單不能有空項");document.webDataForm.elements[i].focus();return;}}document.webDataForm.action = "/updateWebData";document.webDataForm.submit();} </script></body> </html>這里有幾個重要的知識點：
表單中有兩個按鈕該如何發請求。
這里做一個原始的按鈕使用
<button class="fluid ui teal button" type="submit">點擊獲取數據</button>另一個按鈕使用JavaScript腳本：
<button class="fluid ui teal button" onclick="updateWebData()">點擊提交備注</button>其中對應的函數如下：
<script>function updateWebData() {for(var i=0; i<document.webDataForm.elements.length - 2; i++){if(document.webDataForm.elements[i].value==""){console.log(i);alert("當前表單不能有空項");document.webDataForm.elements[i].focus();return;}}document.webDataForm.action = "/updateWebData";document.webDataForm.submit();} </script>其中對應的后端如下：
package com.example.demo.controller;import com.example.demo.model.DataForm; import com.example.demo.object.WebData; import com.example.demo.service.WebDataService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.ModelAttribute; import org.springframework.web.bind.annotation.PostMapping; import java.util.Map;@Controller public class IndexController {@AutowiredWebDataService service;@GetMapping({"/", "/index", "index.html"})public String getIndex(Map<String, Object> map){map.put("userName", "131******1232");map.put("password", "abc*******123");map.put("createTime", "2019-12-08 20:36:32");map.put("remarks", "如：可以使用（禁止帶空格）can_be_used");return "index";}@PostMapping("/getRecord")public String getRecord(Map<String, Object> map){WebData unUserdAccount = service.getUnUserdAccount();if(unUserdAccount != null){map.put("userName", unUserdAccount.getUserName());map.put("password", unUserdAccount.getPassword());map.put("createTime",unUserdAccount.getCreateTime());map.put("remarks", "");}else{//數據庫中無數據的情況下：map.put("userName", "無數據，請聯系站長補充！");map.put("password", "無數據，請聯系站長補充！");map.put("createTime", "無數據，請聯系站長補充！");map.put("remarks", "無數據，請聯系站長補充！");}return "index";}@PostMapping("/updateWebData")public String updateWebData(@ModelAttribute("form") DataForm form){WebData webData = new WebData();webData.setUserName(form.getUserName());webData.setPassword(form.getPassword());webData.setRemarks(form.getRemarks());if(service.updateRemarksByWebData(webData)){return "redirect:/index";}//TODOSystem.out.println("有異常");return "redirect:/index";} }這里接收前端數據用了DataForm，把DataForm里面的成員，設置為前端Input的name
package com.example.demo.model;import lombok.Data;@Data public class DataForm {private String userName;private String password;private String createTime;private String remarks; }通過這種方式來獲取前端數據！
后端在請求中增加map,通過往map中增加數據，來給前端提供數據：
如下偽代碼：
@PostMapping("/getRecord")public String getRecord(Map<String, Object> map){WebData unUserdAccount = service.getUnUserdAccount();if(unUserdAccount != null){map.put("userName", unUserdAccount.getUserName());map.put("password", unUserdAccount.getPassword());map.put("createTime",unUserdAccount.getCreateTime());map.put("remarks", "");}else{//數據庫中無數據的情況下：map.put("userName", "無數據，請聯系站長補充！");map.put("password", "無數據，請聯系站長補充！");map.put("createTime", "無數據，請聯系站長補充！");map.put("remarks", "無數據，請聯系站長補充！");}return "index";}?
總結
以上是生活随笔為你收集整理的前端笔记-freemarker模板获取后端数据及提交数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nginx文档阅读笔记-DNS load
- 下一篇： 前端笔记-js文件首行添加;号（前端小技