Spring MVC之接收页面表单参数

最新推荐文章于 2024-05-20 15:52:30 发布

阿兵-AI医疗

最新推荐文章于 2024-05-20 15:52:30 发布

阅读量4.5k

点赞数 1

分类专栏： Study-Spring-Boot 文章标签： spring mvc 表单 ajax

本文链接：https://blog.csdn.net/webzhuce/article/details/55224983

版权

Study-Spring-Boot 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文以下面表单为例，介绍Spring MVC接受页面表单参数的不同方式。

一、表单网页

这里写图片描述

上面网页的jsp文件为

<!DOCTYPE html >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    </head>
    <body>
        <form action="/addUser" method="post" id="testForm">
            <div class="login-item">
                <label>用户名：</label>
                <input type="text" name="name" id="name" placeholder="点此输入用户名">
            </div>
            <div class="login-item">
                <label>密码：</label>
                <input type="password" name="pwd" id="pwd" placeholder="点此输入密码">
            </div>
            <div class="login-submit">
                <input type="hidden" name="status" value="1" id="status">
                <input type="submit" value="添加用户" class="dc-bt login-bt" id="submitLogin">
            </div>
        </form>
</body>

<script src="/static/js/jquery-3.1.1.min.js"></script>
</html>

对应映射函数是

@RequestMapping(value="/addUser", method = RequestMethod.GET)
public String testForm(Map<String, Object> model){
    return "addUser";
 }

提交之后用下面jsp显示

<!DOCTYPE html >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <div class="login-item">
            <label>用户名：</label>
            <span>${name}</span>
        </div>
        <div class="login-item">
            <label>密码：</label>
            <span>${pwd}</span>
        </div>
    </body>
    <script src="/static/js/jquery-3.1.1.min.js"></script>
</html>

对应的映射函数在不同方式下有所不同，具体见下面。

二、不同的方式

1、直接把表单的参数写在Controller相应的方法的形参中

@RequestMapping(value="/addUser", method = RequestMethod.POST)
public String testShowUser(String name, String pwd, Map<String, Object> model){
    model.put("name", name);
    model.put("pwd", pwd);
    return "showUser";
}

运行结果：

这里写图片描述

2、通过HttpServletRequest接收

@RequestMapping(value="/addUser", method = RequestMethod.POST)
public String testShowUser(HttpServletRequest request, Map<String, Object> model){
    String userName = request.getParameter("name");
    String pwd = request.getParameter("pwd");
    model.put("name", userName);
    model.put("pwd", pwd);
    return "showUser";
}

3、使用注解@RequestParam

@RequestMapping(value="/addUser", method = RequestMethod.POST)
public String testShowUser(@RequestParam(name = "name", required = false) String userName, @RequestParam(name = "pwd", defaultValue = "123456") String password,Map<String, Object> model){
    model.put("name", userName);
    model.put("pwd", password);
    return "showUser";
}

什么也不输入，直接提交表单，运行结果如下

这里写图片描述

代码解释如下：

这里写图片描述

4、通过一个bean来接收

在package com.neon.apple.model下建立一个和表单中参数对应的bean。

package com.neon.apple.model;

public class User {
    private String name;
    private String pwd;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getPwd() {
        return pwd;
    }
    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
}

对应的映射处理函数

@RequestMapping(value="/addUser", method = RequestMethod.POST)
public String testShowUser(User user, Map<String, Object> model){
    model.put("name", user.getName());
    model.put("pwd", user.getPwd());
    return "showUser";
}

5、通过Ajax方式接收

为了实现Ajax方式，对addUser.jsp作修改。代码如下：

<!DOCTYPE html >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="/static/js/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#submitLogin").click(function(){
                     var name = $("#name").val();
                     var pwd = $("#pwd").val();
                     var user = {name:name,pwd:pwd}; //拼装成json格式

                     $.ajax({
                         type:"POST",
                         url:"/addUser",
                         data:user,
                         success:function(data){
                             alert("成功");
                         },
                         error:function(e) {
                             alert("出错："+e);
                         }
                     });
                });
            });
        </script>
    </head>
        <body>
            <form action="/addUser" method="post" id="testForm">
                <div class="login-item">
                    <label>用户名：</label>
                    <input type="text" name="name" id="name" placeholder="点此输入用户名">
                </div>
                    <div class="login-item">
                    <label>密码：</label>
                    <input type="password" name="pwd" id="pwd" placeholder="点此输入密码">
                </div>
                <div class="login-submit">
                    <input type="hidden" name="status" value="1" id="status">
                    <input type="button" value="添加用户" class="dc-bt login-bt" id="submitLogin">
                </div>
            </form>
        </body>
</html>

映射处理函数：

@RequestMapping(value="/addUser", method = RequestMethod.POST)
@ResponseBody public String testShowUser(User user, Map<String, Object> model){
    model.put("name", user.getName());
    model.put("pwd", user.getPwd());
    System.out.println("userName is:"+ user.getName());
    System.out.println("password is:"+ user.getPwd());
    return "showUser";
}

运行结果：

这里写图片描述

consle输出：

这里写图片描述

代码解释：

@ResponseBody支持将返回值放在response体内，而不是返回一个页面。我们在很多基于Ajax的程序的时候，可以以此注解返回数据而不是页面；此注解可放置在返回值前或这方法上。

如果表单元素很多，手工拼装成json数据非常麻烦，可以使用jQuery提供的serializeArray()方法序列化表单元素，返回json数据结构数据。如下图稍微改动一下。

这里写图片描述

备注

这里写图片描述

根据不同的网页请求，映射到不同的处理方法。上图定义了两个方法分别对使用GET和POST请求访问
“/addUser”时的响应。可以使用处理GET请求的方法显示视图，使用POST请求的方法处理业务逻辑。

这里写图片描述

返回 Java EE Web开发系列导航。

阿兵-AI医疗

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Spring MVC之接收页面表单参数

本文以下面表单为例，介绍Spring MVC接受页面表单参数的不同方式。一、表单网页上面网页的jsp文件为<!DOCTYPE html ><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.
复制链接

扫一扫