Spring MVC之中前端向后端传数据和后端向前端传数据是数据流动的两个方向, 在此先介绍前端向后端传数据的情况.

一般而言, 前端向后端传数据的场景, 大多是出现了表单的提交,form表单的内容在后端学习的md文档之中有所介绍,form标签的语法格式如下

<FORM NAME="FORM1" ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="...">
... ...
</FORM>

主要是三个参数的介绍,也就是name, methodaction, 其中name可以省略, 只是一个标记符号, 用处不太大, 而action表示处理这个表单的方法, method表示将数据传输给后端的方式, 默认是get方式,这是基本的一些介绍.

前端页面

数据是从前端的提交表单之中获取的, 所以首先必须得有一个表单, 此处使用了freemarker视图的页面, 命名为login.ftl, form的名字为"login", 其中在form之中的action表示的是要处理这"login"表单的后台url(方法), 也就是对应的controller之中的url(方法), 正好在LoginController.java之中,其中login.ftl如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个freemarker模板</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- CSS样式 -->
</head>
<body>
<h4 class="text-primary">登录页面</h4>
<!-- 这些基本的东西貌似没有变,使用方法和在jsp之中一致,有变化的在于数据的获取-->
<form name="login" action="/freemarker/login" class="text-info">
姓名:<input type="text" name="name"><br/>
性别:<input type="text" name="gender"><br/>
年龄:<input type="text" name="age"><br/>
密码:<input type="password" name="password"><br/>
<input type="submit" value="提交">
</form>
</body>
</html>
后台方法

如下是处理前端页面提交内容的方法login, 但是在下面有两个方法, 其中此处用到的方法是login, 在这个Controller之中, 我们把从前台提交的数据处理, 需要注意的是, 我们在form之中定义的参数的名字, 也就是以上每个input的name属性, 和在LoginController之中login方法的参数的名称是一样的, 这样就可以保证数据的对应, 但是这样也使得前端和后端耦合, 是现在不太推荐的.

@Controller
@RequestMapping("/freemarker")
public class LoginController {
private Logger logger = LoggerFactory.getLogger(LoginController.class); @RequestMapping(value = "/gotologin", method = RequestMethod.GET)
public String gotoLogin() {
//跳转到登录的login页面
logger.debug("正在跳转到login页面!");
return "login";
} @RequestMapping(value = "/login", method = {RequestMethod.GET, RequestMethod.POST})
public String login(String name, String gender, int age, String password, Model model) {
//从页面之中提取输入的信息,并且封装好
model.addAttribute("name", name);
model.addAttribute("gender", gender);
model.addAttribute("age", age);
model.addAttribute("password", password);
//获取了页面的信息之后,就将信息发送到想要展示的页面
logger.debug("name: " + name + ", gender: " + gender + ", age: " + age + ", password: " + password);
return "showinfo";
}
}
前台展示

其实完成以上两个步骤, 我们已经把从前台传输过来的数据,完成了后台的处理,并且把数据存储在了model之中,但是这样的情况下, 数据没有展示出来,其结果不直观, 那么,此时就需要将后端处理好的数据, 展示在前端页面, 为此我们创建一个页面, 将登陆后的信息展示出来,命名为showinfo.ftl

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第一个freemarker模板</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- CSS样式 -->
</head>
<body>
<!-- freemarker获取信息 -->
<h3 class="text-justify"> 登录信息如下:</h3>
<h4 class="text-info"> 姓名:${name}</h4>
<h4 class="text-dark"> 性别:${gender}</h4>
<h4 class="text-primary"> 年龄:${age}</h4>
<h4 class="text-danger"> 密码:${password}</h4>
</body>
</html>

完成以上三个步骤,就完成了从前台输入,到后台处理, 再到前端展示的过程,示意图如下:

st=>start: 开始
e=>end: 结束
op1=>operation: 前台输入
op2=>operation: 后台处理
op3=>operation: 前台展示
st(right)->op1(right)->op2(right)->op3(right)->e
后台直接传数据给前端

实际上, 如果没有前台输入, 后台自己造数据, 也是可以直接给前台展示的, 示意图如下:

st=>start: 开始
e=>end: 结束
op2=>operation: 后台处理
op3=>operation: 前台展示
st(right)->op2(right)->op3(right)->e

代码操作如下:

@Controller
public class ToFrontController {
private static Logger logger = LoggerFactory.getLogger(ToFrontController.class); //在把值传给前端页面的时候,一般是需要通过Model协助的,没有不需要Model或者接近的辅助处理方式的方法
//此处其实不需要传值,因为不接收前端传来的值,只需要在里面自己设置即可
@RequestMapping(value = "/toFrontTest")
public String toFront(Model model) {
logger.info("toFront方法被调用,应该返回toFrontInfo的视图!");
User user1 = new User();
user1.setAge(24);
user1.setName("Wangsan Lee");
user1.setPassword("dfasfagasdfsdafgyrt75");
System.out.println(user1.getName() + "," + user1.getAge() + "," + user1.getPassword());
model.addAttribute("user1", user1);
return "tryandlearn/toFrontInfo";
}
}
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sf1" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="from" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
<title>toFrontInfo</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- CSS样式 -->
</head>
<body>
<h4 class="text-info">toFrontInfo,此处是后端传给前端理后的信息,显示在此处</h4>
<p class="text-md-center text-area text-warning">后端传值给前端,涉及到的部分包括,ToFrontController之中的toFront方法处理,
然后处理完成后,跳转到tryandlearn/toFrontInfo.jsp页面,ToFrontController之中的toFront方法里面的参数,都是写死了的,
可以认为是已经从前端来,然后经过后端处理好了,需要传给前端的值</p>
<p class="text-info">ToFrontController.toFront(name,age,password,model)--->tryandlearn/toFrontInfo.jsp</p> <h4 class="text-info">使用\<\form:form\>标签包起来的方式!</h4>
<form:form method="get" action="toFrontTest" modelAttribute="user1">
name:${user1.name} </br>
age:${user1.age} </br>
password:${user1.password}</br>
</form:form>
<!-- form标签,jstl标签,sf标签,el表达式,各自使用在什么地方并且有什么区别?--> <h4 class="text-info">使用\<\form:form\>标签包起来的方式!命名了不同的标签名字!</h4>
<sf1:form method="get" action="toFrontTest" modelAttribute="user1">
name:${user1.name} </br>
age:${user1.age} </br>
password:${user1.password}</br>
</sf1:form>
<!-- form标签,jstl标签,sf标签,el表达式,各自使用在什么地方并且有什么区别?--> <h4 class="text-warning">不使用\<\form:form\>标签包起来的方式!</h4>
name:${user1.name} </br>
age:${user1.age} </br>
password:${user1.password}</br> </body>
</html>
操作之中的错位感
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="sf" uri="http://www.springframework.org/tags" %>
<html> <head>
<title>一个有内涵的Index页面!</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- CSS样式 -->
</head>
<body>
<!-- Spring MVC貌似不支持从一个jsp页面通过<a href="sss.jsp">的方式跳转,都要通过controller的方式访问页面-->
<h3 class="text-info">我是XML方式配置的Spring MVC工程首页!</h3>
<a href="/freemarker/hello">freemarker的hello首页!(通过controller的方式访问页面)</a></br>
<a href="/freemarker/gotologin">跳转到登录首页</a></br>
</body>
</html>

我们知道,前端是一个展示的页面, 主要展示出来数据和页面, 当然也要收集数据, 但是总的一切都是为了收集数据,比如,我们要登录, 登录的页面是login.html, 但是如果想到达这个页面, 我们需要一个链接让其跳转到这个页面, 在<a href="/freemarker/gotologin">跳转到登录首页</a></br>之中说明处理这个跳转的url, 是的,我们跳转到了http://localhost:8080/freemarker/gotologin,但是这是在后台的Controller之中决定的, 是在第一段LoginController之中的gotologin方法之中,才决定跳转到login页面,所以其实有一个延迟性, 我们想达成的, 都要做作为我们当前动作的结果出现, 也就是说,比如我们想要到达登录页面, 那么这个结果必将是我们当前动作的结果, 而什么是当前的动作呢? 那就是要跳转到登录页面, 如果我们登录之后, 想要展示登陆的信息, 这两个操作是连贯的, 登录, 然后展示, 也就是说, login-->show, 意味着show是登录的结果, 那么show就要作为结果出现,在第一段代码的login方法中体现了出来, 也就是login方法返回的是showinfo, 而showinfo之中需要的信息, 就需要在后端返回的信息之中获取.

<!-- freemarker获取信息 -->
<h3 class="text-justify"> 登录信息如下:</h3>
<h4 class="text-info"> 姓名:${name}</h4>
<h4 class="text-dark"> 性别:${gender}</h4>
<h4 class="text-primary"> 年龄:${age}</h4>
<h4 class="text-danger"> 密码:${password}</h4>

Spring MVC之中前端向后端传数据的更多相关文章

  1. Spring MVC 学习笔记11 —— 后端返回json格式数据

    Spring MVC 学习笔记11 -- 后端返回json格式数据 我们常常听说json数据,首先,什么是json数据,总结起来,有以下几点: 1. JSON的全称是"JavaScript ...

  2. Spring MVC 实现文件的上传和下载

    前些天一位江苏经贸的学弟跟我留言问了我这样一个问题:“用什么技术来实现一般网页上文件的上传和下载?是框架还是Java中的IO流”.我回复他说:“使用Spring MVC框架可以做到这一点,因为Spri ...

  3. Spring MVC 学习总结(九)——Spring MVC实现RESTful与JSON(Spring MVC为前端提供服务)

    很多时候前端都需要调用后台服务实现交互功能,常见的数据交换格式多是JSON或XML,这里主要讲解Spring MVC为前端提供JSON格式的数据并实现与前台交互.RESTful则是一种软件架构风格.设 ...

  4. 第6章 Spring MVC的数据转换、格式化和数据校验

    使用ConversionService转换数据 <%@ page language="java" contentType="text/html; charset=U ...

  5. Spring MVC登录注册以及转换json数据

    项目结构; 代码如下: BookController package com.mstf.controller; import javax.servlet.http.HttpServletRespons ...

  6. 关于我使用spring mvc框架做文件上传时遇到的问题

    非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题 ...

  7. 前端与后端的数据交互(jquery ajax+python flask)

    前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前端的数据发送与接收 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收 ...

  8. spring mvc接收ajax提交的JSON数据,并反序列化为对象

    需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; ...

  9. Python Django 前后端数据交互 之 前端向后端发送数据

    Python Django 之 前端向后端发送数据

随机推荐

  1. Android 学习Activity(1)activity和intent

    工具是:JDK环境配置+SDK+ADT工具 一.Activity  主要作用: 1.用户与应用程序的接口 2.控件的容器 二.创建Activity要点:(在src中的目录下包里) 1.一个Activi ...

  2. spring 的IoC的个人理解

    1.ioc IoC的概念介绍 ( a).依赖注入, 分为依赖 和 注入  , 其实依赖是一种耦合方式, 通过spirng在运行时将这种依赖关系完成, 达到解耦目的, 同时达到代码重用, 方便测试,更加 ...

  3. mysql 建表语句

    修改id为自动增长: alter table book b_ISBN int(11) auto_increment;   自动增长要加的:auto_increment 基本的sql语句: 选择:sel ...

  4. MessageQueue 一 简单的创建和读取

    创建一个队列,并写入数据 在读取出来 using System; using System.Collections.Generic; using System.Linq; using System.M ...

  5. JavaScript UI技术选型

    ExtJS l ExtJS(TODO:找旧版本,类似现在EasyUI插件的旧版本)简介:纯JS支持:IE6授权:GPLv3授权.商业授权($329/人) l Ext.NET简介:ExtJS的NET封装 ...

  6. classpath的总结

    转自:http://blog.csdn.net/javaloveiphone/article/details/51994268   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.src不是 ...

  7. iOS 任务的依赖操作

    -(void)dependency{ /** 假设有A.B~C三个操作,要求: 1. 3个操作都异步执行 2. 操作C依赖于操作B 3. 操作B依赖于操作A */ //创建一个队列 NSOperati ...

  8. Windows操作系统线程调度耍起来

    Windows等常用操作系统都不是实时性操作系统,所谓不是实时性,意思是你写的程序放在这个操作系统上面运行,当程序需要睡眠2秒时,你的程序睡眠的可能不是2秒,而是2秒后能变为可调度状态,但是如果系统程 ...

  9. CentOS下KVM配置NAT网络(网络地址转换模式)

    KVM虚拟机Nat方式上网: # 查看当前活跃的网络 virsh net-list # 查看该网络的详细配置 virsh net-dumpxml default 客户机的XML配置文件中interfa ...

  10. nginx启动、重启、重新加载配置文件和平滑升级

    Nginx有一个主进程和几个工作进程,主进程的主要作用就是读取.评估配置文件和管理工作进程,工作进程对请求做实际处理.工作进程的数量是在配置文件中配置的,一般设置为cpu的核心数*线程数. nginx ...