目录
- 表单提交
-
表单提交二
- 后台代码接收方式一
- 后台代码接收方式二
表单提交
此处的表单时 -使用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
如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。