通过表单序列化传递参数就是将表单数据转化成字符串传递到后台,序列化之后参数请求变成这种模式param1=value1&&param2=value2,下面用代码实现。

1、创建表单

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%
String root = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ root + "/";
%>
<script type="text/javascript"
src="<%=basePath%>jslib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="<%=basePath%>jslib/jquery.form.js"></script>
<script type="text/javascript" src="<%=basePath%>js/param.js"></script>
<link href="<%=basePath%>css/param.css" type="text/css" rel="stylesheet">
<title>Insert title here</title>
</head>
<body>
<div class="param">
<div class="simple public">
<!--表单序列化传递参数 -->
<div class="public formSerial">
<p style="text-align: center;">表单序列化传递参数</p>
<form id="formSerialForm">
<table id="formSerialTable">
<tr>
<td>id:</td>
<td><input type="text" name="id" value=""></td>
</tr>
<tr>
<td>名称:</td>
<td><input type="text" name="name" value=""></td>
</tr>
<tr>
<td></td>
<td style="text-align: right;"><input type="button"
value="提交" id="setFormSerialParam"></td>
</tr>
</table>
</form>
</div>
</div> </body>
</html>

页面效果图如下:

2、绑定提交请求事件

$(function() {

    /* 表单序列化方式传递数据 */

    $("#setFormSerialParam").click(function() {
$.ajax({
url : "./formSerial",
type : "POST",
/* 将form数据序列化之后传给后台,数据将以id=**&&name=** 的方式传递 */
data : $("#formSerialForm"
).serialize(),
success : function(data) {
console.info(data.stringList);
}
});
});
});

上面红色加粗的部分就是表单的序列化。

3、创建控制器接受参数

@Controller
@RequestMapping("/param")
public class ParamController { /**
* 获取表单序列化数据 参数名称和表单中的name保持一致
*
* @param idList
* @return
*/
@RequestMapping(value = "formSerial")
public ModelAndView getParamByFormSerial(String id, String name) {
ModelAndView mv = new ModelAndView();
String[] paramArray = { id, name };
mv.addObject(paramArray);
mv.setView(new MappingJackson2JsonView());
return mv;
} }

红色加粗部分为接受参数的方式,其实这种方式跟第一种简单参数的接受方式是一样的,只不过提交表单数据的方式不一样罢了。上面的控制器中直接将获取的参数渲染到JSON视图中。

4、测试

在页面输入如下参数:

点击提交查看请求URL,可以看到参数传递成功

查看响应结果:

可以看到返回了一个字符串列表,列表数据就是前端输入的值,说明控制器获取成功。

5、总结

至此,Spring MVC中参数传递和接受的所有方法都已经总结完毕,需要注意以下几点:

  • pojo类型、JSON类型和对象数组类型的参数传递,都要保证前端的参数名和对应POJO中的属性名一致;
  • 简单类型和序列表单方式传递时,也要保证前后端的参数名称一致;
  • 通过JSON和列表方式传递时,前端需要指定数据类型为application/json,并且数据要转化成字符串传递;
  • 注解方式比较灵活,不要求前后端命名规则一样;

实际开发过程中,需要根据情况选择合适的接受方式。

Spring MVC(十)--通过表单序列化传递参数的更多相关文章

  1. 关于Spring MVC中的表单标签库的使用

    普通的MVC设计模式中M代表模型层,V代表视图层,C代表控制器,SpringMVC是一个典型的MVC设置模式的框架,对于视图和控制器的优化很多,其中就有与控制器相结合的JSP的表单标签库. 我们先简单 ...

  2. spring mvc:练习:表单验证(javaConfig配置和注解)

    使用Spring表单标签, 表单验证使用 JSR303 的验证注解,hibernate-validators,提供了使用MessageSource和访问静态资源(如CSS,JavaScript,图片) ...

  3. Spring MVC实现防止表单重复提交(转)

    Spring MVC拦截器+注解方式实现防止表单重复提交  

  4. Spring mvc之提交表单

    表单内容: <body> <form action="user/login"> <table> <tr> <td>用户名 ...

  5. Spring MVC 数据绑定和表单标签库

    数据绑定是将用户输入绑定到领域模型的一种特性.作用是将 POJO 对象的属性值与表单组件的内容绑定. 数据绑定的好处: 1. 类型总是为 String 的 HTTP 请求参数,可用于填充不同类型的对象 ...

  6. spring mvc数据绑定与表单标签库

    Book类为 package org.shaoxiu; public class Book { private String id; private String name; public Book( ...

  7. Spring MVC中 提交表单报错400

    背景: 在写SpringMVC表单提交的代码的时,在最后点击提交的时候总是会出现400的错误 原因: 主要原因就是表单提交的数据和对应实体类的属性无法完全匹配 解决方案: 查看我们提交的数据是否完全和 ...

  8. spring mvc redirect 重定向 跳转并传递参数

    在项目中做form表单功能提交时,防止用户客户端后退或者刷新时重复提交问题,需要在服务端进行重定向跳转,具体跳转方式有以下几种方式: 公用代码: @RequestMapping(value=" ...

  9. spring学习 十四 注解AOP 通知传递参数

    我们在对切点进行增强时,不建议对切点进行任何修改,因此不加以使用@PointCut注解打在切点上,尽量只在Advice上打注解(Before,After等),如果要在通知中接受切点的参数,可以使用Jo ...

随机推荐

  1. vue+nginx配置二级域名

    [1]修改路由文件 [2]修改配置文件 [3]修改本机nginx配置文件 [4]修改服务器nginx配置文件 [5]重启nginx文件,用二级域名访问 http://192.168.199.xxx:7 ...

  2. Spark Streaming的简单介绍

    本文讲解Spark流数据处理之Spark Streaming.本文的写作时值Spark 1.6.2发布之际,Spark 2.0预览版也已发布,Spark发展如此迅速,请随时关注Spark Stream ...

  3. JS事件 鼠标经过事件(onmouseover)鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  4. Nginx安装及分流多个web服务

    Ngnix安装及常用配置 一.安装Nginx 1.检查依赖 yum install gcc-c++ yum install -y pcre pcre-devel yum install -y zlib ...

  5. springboot EL @Value

    一,springboot中 看一下代码: @Controller public class HelloController { //读取枚举值 @Value("#{T(com.example ...

  6. codeforces 1180E Serge and Dining Room 线段树

    题目传送门 题目大意: 给出a序列和b序列,a序列为各种食物的价格,b序列为一列排着队的小朋友拥有的钱,小朋友依次购买食物,每个人都买自己能买的起的最贵的食物,买不起就离开队伍.给出q次操作,操作1是 ...

  7. mysql 主从笔记

    主库配置 一.修改主库配置文件 开启binlog,并设置server-id,每次修改配置文件后都要重启mysql服务才会生效 server-id = log-bin = mysql-bin binlo ...

  8. 树形dp经典换根法——cf1187E

    假设以u为根时结果是tot,现在转换到了以u的儿子v为根,那么结果变成了tot-size[v]+(sizetot-size[v]) 根据这个转移方程,先求出以1为根的tot,然后dfs一次转移即可 # ...

  9. 云-腾讯云-实时音视频:实时音视频(TRTC)

    ylbtech-云-腾讯云-实时音视频:实时音视频(TRTC) 支持跨终端.全平台之间互通,从零开始快速搭建实时音视频通信平台 1.返回顶部 1. 腾讯实时音视频(Tencent Real-Time ...

  10. 云-腾讯云-笔记:pom.xml 配置

    ylbtech-云-腾讯云-笔记:pom.xml 配置 1. pom.xml返回顶部 1.1 com.qcloud / 腾讯云 <!-- https://mvnrepository.com/ar ...