通过表单序列化传递参数就是将表单数据转化成字符串传递到后台,序列化之后参数请求变成这种模式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. JS对象 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

    指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...

  2. 用Jquery写返回顶部代码

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>jq ...

  3. 93. 复原IP地址

    题目描述: 给定一个只包含数字的字符串,复原它并返回所有可能的 IP 地址格式. 示例: 输入: "25525511135" 输出: ["255.255.11.135&q ...

  4. phonegap 开发指南系列(3) ----在Eclipse中Android开发环境搭建

      前提条件:已在Eclipse中安装好Android SDK 和 ADT. 1.下载PhoneGap,解压. 2.用Eclipse新建一个安卓项目. 3.将phoneGap解压包里的Android文 ...

  5. [JZOJ3303] 【集训队互测2013】城市规划

    题目 题目大意 求\(N\)个点的简单无向图的方案数(有编号). 结果对\(1004535809\)取模. 思考历程 感觉这个问题非常经典. 当时想到了一堆式子,但都觉得可能会有重和漏,于是弃掉了-- ...

  6. 简单的 js手写轮播图

    html: <div class="na1">   <div class="pp">    <div class="na ...

  7. js--判断当前环境是否为微信环境

    /** * 判断是否是微信环境 */ function getIsWxClient () { var ua = navigator.userAgent.toLowerCase(); if (ua.ma ...

  8. (转)Android--使用Canvas绘图

    转:http://www.cnblogs.com/plokmju/p/android_canvas.html 前言 除了使用已有的图片之外,Android应用常常需要在运行时根据场景动态生成2D图片, ...

  9. JS之缓冲动画

    原素材 main.html <!DOCTYPE html> <html lang="en"> <head> <link href=&quo ...

  10. python常用包及功能介绍

    1.NumPy数值计算 NumPy是使用Python进行科学计算的基础包,Numpy可以提供数组支持以及相应的高效处理函数,是Python数据分析的基础,也是SciPy.Pandas等数据处理和科学计 ...