基本概念

这里有如下页面：

这里面表单的数据都是从后端获取的，点获取数据，会调用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模板获取后端数据及提交数据相关推荐

关于避免审查元素时，修改数据和提交数据，造成恶意审查修改的方法总结
作为一名程序员或者用户,都知道在浏览器审查元素时,是可以修改数据的,如果修改数据,在提交就会造成不可预想的后果,特别是在数据安全的领域.一般查询数据都会返回记录的id,和一些关键的信息,虽然这些信息不 ...
php提交数据 get 提交数据查询数据返回给浏览器查询到的数据
1.action属性指定提交数据的地址 2.method属性设置提交方式(get或post) 3.input标签的name属性,标记需要提交的数据 4.php中$GET接收提交过来的数据 <!D ...
前端笔记-通过jQuery获取input数据及html中name的使用
在前端开发中,使用表单会进行跳转,有时候并不需要这个的.这里通过jQuery,使用AJAX直接发送Json数据. 运行截图如下: 界面如下: 这里可以看到 div里面是group1,然后后面都是inp ...
前端笔记-在Element UI中表格如何根据数据动态变化显示
前言实际上我需要的功能类似于前端工程中的字典.由于在前端的学习自己写代码的过程中可能不会对一个项目工程化的如此的彻底,所以这里给出了一种解决方法. 需求对于Element UI里的表格,如果假设传 ...
Java笔记-通过反射获取枚举类型中所有数据
程序运行截图如下: 代码如下: Em.java package cn.it1995;public enum Em {ONE(1, "第一个枚举"),TWO(2, "第二个 ...
前端笔记-使用JavaScript防止空表单提交
程序演示如下: 这里对应的ID卡号是没有填写的! 如果按下添加按钮这里对应的JavaScript源码如下: <script type="text/javascript"&g ...
（笔记）关于spit截取表单提交数据区分符号中英文及正则判断
//中文逗号转英文function valiPhoneNumber() {var numbers = $("#PhoneNumber").val();numbers = numbe ...
易语言post发送php数据,post提交数据
.版本 2 .子程序功能_网页访问, 文本型, , 本命令由[精易网页调试助手]生成,请配合精易模块使用. .局部变量局_网址, 文本型 .局部变量局_方式, 整数型 .局部变量局_提交 ...
SVN更新数据和提交数据的几个疑问
有以下几个问题: 1.我检出一份副本到本地,修改了几个文件,然后我提交到SVN服务器中,此时服务器是如何更新有关的数据的呢?是不是把原来旧的文件数据删除了,保存最新提交的数据呢? 2.假设我修改了 P ...

前端笔记-freemarker模板获取后端数据及提交数据

基本概念

代码与实例

前端笔记-freemarker模板获取后端数据及提交数据相关推荐

最新文章

热门文章