Spring MVC之中前端向后端传数据

Spring MVC之中前端向后端传数据

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

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

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

主要是三个参数的介绍,也就是name, method和action, 其中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>

原文地址：https://www.cnblogs.com/prayjourney/p/9348200.html

时间： 2024-10-08 01:25:23

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

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

项目结构; 代码如下: BookController package com.mstf.controller; import javax.servlet.http.HttpServletResponse; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; import org.codehaus.jackson.map.ObjectMapper; import com.mstf.

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

需求:spring mvc接收ajax提交的JSON数据,并反序列化为对象,代码如下: 前台JS代码: //属性要与带转化的对象属性对应 var param={name:'语文',price:16}; $.ajax({ url: "/book/adddata", type: "POST", dataType: 'json', //必需设定,后台@RequestBody会根据它做数据反序列化 contentType:"application/json&quo

spring MVC 转发与重定向（传参）

return "forward:index.jsp"; //转发  return "forward:user.do?method=reg5"; //转发 return new ModelAndView("/toList");//转发 return "redirect:user.do?method=reg5"; //重定向 return "redirect:http://www.baidu.com"; //重

Spring MVC环境中文件上传大小和文件类型限制以及超大文件上传bug问题

    在上一篇文章中,主要介绍了Spirng MVC环境下的正常情况下文件上传功能实现.在实际开发的时候,还会涉及到上传文件大小和类型的限制,接下来就会对Spirng MVC环境下文件上传大小和类型的限制进行介绍,还会讲解到文件上传大小tomcat服务器bug问题及解决方案. 一.文件上传大小限制 这里还是接着上篇文章先介绍Spring MVC下的文件上传大小限制,文件上传大小的限制在springmvc-config.xml中配置文件解析器CommonsMultipartResolver时即可

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

非常感谢作者 原文:https://blog.csdn.net/lingirl/article/details/1714806 昨天尝试着用spring mvc框架做文件上传,犯了挺多不该犯的毛病问题1:org.springframework.web.util.NestedServletException: Request processing failed; nested exception is java.lang.ClassCastException: org.apache.catalin

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

文件上传是项目开发中最常见的功能.为了能上传文件,必须将表单的method设置为POST,并将enctype设置为multipart/form-data.只有在这样的情况下,浏览器才会把用户选择的文件以二进制数据发送给服务器. 一旦设置了enctype为multipart/form-data,浏览器即会采用二进制流的方式来处理表单数据,而对于文件上传的处理则涉及在服务器端解析原始的HTTP响应.在2003年,Apache Software Foundation发布了开源的Commons File

spring mvc中的文件上传

使用commons-fileupload上传文件所需要的架包有:commons-fileupload 和common-io两个架包支持,可以到Apache官网下砸. 在配置文件spring-mvc.xml中配置上传: <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> //文件上传最大是多少 <

Spring MVC MultipartFile实现图片上传

<!--Spring MVC xml 中配置 --><!-- defaultEncoding 默认编码;maxUploadSize 限制大小--><!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMultipartResolver --> <beans:bean id="multipartResolver" class="org.springframework.web.multipart.c

【Spring学习笔记-MVC-13.2】Spring MVC之多文件上传

作者:ssslinppp       1. 摘要 前篇文章讲解了单文件上传<[Spring学习笔记-MVC-13]Spring MVC之文件上传>http://www.cnblogs.com/ssslinppp/p/4607043.html (请参考).本文主要讲多文件上传的过程. 主要区别在于控制层代码不同,同时,jsp代码也有相应修改. 2. 添加jar包 commons-fileupload-1.2.2.jar: commons-io-2.0.1.jar: 3. 配置CommonsMul