表单提交
此处的表单时 -使用JSON.stringify()函数将数组转换成json类型提交后台，后台使用@RequestBody User user接受处理
页面js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//新增提交按钮 $( "#buildsubmit" ).click( function () { var param = $( ".form" ).serializeJson(); $.ajax({ type: 'post' , url: path + "/web/member/save.do" , contentType: "application/json" , dataType: 'json' , data: JSON.stringify(param), success: function (data) {
}, }); } }); |
后端代码
|
1 2 3 4 5 6 7 8 9 |
@RequestMapping (value = "/save" , method = RequestMethod.POST) public GeneralResponse save( @RequestBody @Valid MemberInsertDetail member, BindingResult bindingResult) throws JsonProcessingException { if (bindingResult.hasErrors()) { throw new ErrParamException(); } boolean flag = false ; flag = memberService.save(member); } |
表单提交二
使用.serialize()方法 提交表单内容；
1、可以后台使用 request.getParamter("对应字段的name")获取参数；
2、也可以使用 Model mdel 的POJO接受。（name要一一对应起来）
格式：var data = $("#formID").serialize(); 功能：将表单内容序列化成一个以&拼接的字符串，键值对的形式，name1=val1&name2=val2&，空格以%20替换。页面JS
|
1 2 3 4 5 6 7 8 9 10 11 |
function sub(){ $.ajax({ type: "post" , url: "/restaurant/addEmployees.do" , data:$( "#form" ).serialize(), dataType : "json" , success: function (data){ if (!data.success){ } }); } |
页面html代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
< form action = "" id = "staff_form" > < div class = "addInfor" > < input type = "" name = "phone" id = "phone" value = "" placeholder = "请输入手机号" /> < input type = "" name = "password" id = "password" value = "" placeholder = "请输入密码" /> < input type = "" name = "username" id = "username" value = "" placeholder = "请输入姓名" />
< input name = "checkbox" value = "chief_store_member" type = "checkbox" > < label class = "grey-font" >多店管理</ label > < input name = "checkbox" value = "branch_store_member" type = "checkbox" > < label class = "grey-font" >单店管理</ label > </ div > < button type = "button" class = "mui-btn orange-btn" ο nclick = "sub();" >确认</ button > </ form > |
后台代码接收方式一
含有单个的checkbox参数接收
|
1 2 3 4 5 6 7 8 9 |
@RequestMapping ( "/addEmployees" ) @ResponseBody public Result<Integer> addEmployees(HttpServletRequest request) { String phone = request.getParameter( "phone" ); String password = request.getParameter( "password" ); String username = request.getParameter( "username" ); 身份单checkbox接收。如果是复选框多个checkbox，则用数组String[] 接收。 String checkbox = request.getParameter( "checkbox" ); } |
后台代码接收方式二
|
1 2 3 4 5 6 |
@RequestMapping (value= "/addCustomer" ,method=RequestMethod.POST) @ResponseBody public LogisticsResult addCustomer( @Valid CustomerInfo customer,BindingResult result ){ 如果是复选框多个checkbox，则在pojo中 用与checkbox的name一样的 数组接收。 如： String[] checkbox; } |
接收List<String>集合参数：
1、页面js代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var idList = new Array(); idList.push([1]); idList.push([2]); idList.push([3]); var isBatch = false ; $.ajax({ type: "POST" , url: "<%=path%>/catalog.do?fn=deleteCatalogSchemes" , dataType: 'json' , data: { "idList" :idList, "isBatch" :isBatch}, success: function (data){ … }, error: function (res){ … } }); |
2、Controller方法：
|
1 2 3 4 5 6 7 8 9 |
@Controller @RequestMapping ( "/catalog.do" ) public class CatalogController { @RequestMapping (params = "fn=deleteCatalogSchemes" ) @ResponseBody public AjaxJson deleteCatalogSchemes( @RequestParam ( "idList[]" ) List<String> idList,Boolean isBatch) { … } } |
接收List<User>、User[]集合参数：
1、User实体类：
|
1 2 3 4 5 |
public class User { private String name; private String pwd; //省略getter/setter } |
2、页面js代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var userList = new Array(); userList.push({name: "李四" ,pwd: "123" }); userList.push({name: "张三" ,pwd: "332" }); $.ajax({ type: "POST" , url: "<%=path%>/catalog.do?fn=saveUsers" , data: JSON.stringify(userList), //将对象序列化成JSON字符串 dataType: "json" , contentType : 'application/json;charset=utf-8' , //设置请求头信息 success: function (data){ … }, error: function (res){ … } }); |
3、Controller方法：
|
1 2 3 4 5 6 7 8 9 |
@Controller @RequestMapping ( "/catalog.do" ) public class CatalogController { @RequestMapping (params = "fn=saveUsers" ) @ResponseBody public AjaxJson saveUsers( @RequestBody List<User> userList) { … } } |
如果想要接收User[]数组，只需要把saveUsers的参数类型改为@RequestBody User[] userArray就行了。
接收List<Map<String,Object>>集合参数：
1、页面js代码（不需要User对象了）：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var userList = new Array(); userList.push({name: "李四" ,pwd: "123" }); userList.push({name: "张三" ,pwd: "332" }); $.ajax({ type: "POST" , url: "<%=path%>/catalog.do?fn=saveUsers" , data: JSON.stringify(userList), //将对象序列化成JSON字符串 dataType: "json" , contentType : 'application/json;charset=utf-8' , //设置请求头信息 success: function (data){ … }, error: function (res){ … } }); |
2、Controller方法：
|
1 2 3 4 5 6 7 8 9 10 |
@Controller @RequestMapping ( "/catalog.do" ) public class CatalogController {
@RequestMapping (params = "fn=saveUsers" ) @ResponseBody public AjaxJson saveUsers( @RequestBody List<Map<String,Object>> listMap) { … } } |
接收User(bean里面包含List)集合参数：
1、User实体类：
|
1 2 3 4 5 6 |
public class User { private String name; private String pwd; private List<User> customers; //属于用户的客户群 //省略getter/setter } |
2、页面js代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var customerArray = new Array(); customerArray.push({name: "李四" ,pwd: "123" }); customerArray.push({name: "张三" ,pwd: "332" }); var user = {}; user.name = "李刚" ; user.pwd = "888" ; user. customers = customerArray; $.ajax({ type: "POST" , url: "<%=path%>/catalog.do?fn=saveUsers" , data: JSON.stringify(user), //将对象序列化成JSON字符串 dataType: "json" , contentType : 'application/json;charset=utf-8' , //设置请求头信息 success: function (data){ … }, error: function (res){ … } }); |
3、Controller方法：
|
1 2 3 4 5 6 7 8 9 10 |
@Controller @RequestMapping ( "/catalog.do" ) public class CatalogController { @RequestMapping (params = "fn=saveUsers" ) @ResponseBody public AjaxJson saveUsers( @RequestBody User user) { List<User> customers = user.getCustomers(); … } } |
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
原文链接：https://blog.csdn.net/victoylin/article/details/79803546
查看更多关于SpringMVC如何接收参数各种场景的详细内容...