目录
  1. 1. ajax向后端传多个值
    1. 1.1. 一、拼串
      1. 1.1.1. 1.把需要的数据按照指定格式拼串
      2. 1.1.2. 2.发起ajax请求,批量删除
      3. 1.1.3. 3.后台处理数据
        1. 1.1.3.1. (1)控制器拦截处理
        2. 1.1.3.2. (2)业务层的实现类
        3. 1.1.3.3. (3)扩展
    2. 1.2. 二、把传递的值用对象封装
      1. 1.2.1. 1.创建一个类,用于数据的封装
      2. 1.2.2. 2.前端数据的封装
      3. 1.2.3. 3.后台数据的处理
        1. 1.2.3.1. (1)控制器接收数据
        2. 1.2.3.2. (2)方式一:业务层的实现类
        3. 1.2.3.3. (3)方式一:映射文件
        4. 1.2.3.4. (4)方式二:业务层的实现类
        5. 1.2.3.5. (5)方式二:mapper
        6. 1.2.3.6. (6)映射文件
Ajax向后端传多个值

One day, One word: 只有能面对现实,你才能超越现实


index:经常利用ajax向后端传多个数据,最常见的就是批量删除的情况,一次性传多个id,怎么传?后端如何接受;批量修该需要传多个属性的多个值,如何传递?


ajax向后端传多个值

一、拼串

  • 这里以批量删除为例

1.把需要的数据按照指定格式拼串

  • 通过主键批量删除数据,这里的数据格式为id=5&id=6&id=7
  • 注意这时候拼串用到的属性名为id
1
2
3
4
5
6
7
8
9
var idStr = "";
$.each(selectCheckbox,function(i,n){
if(i!=0){
idStr += "&"
}
// id=5&id=6&id=7
idStr += "id="+n.id;
});
alert(idStr);

2.发起ajax请求,批量删除

  • 此处省略对按钮绑事件和调用函数的操作
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
type : "POST",
data : idStr,
url : "${APP_PATH}/user/doDeleteBatch.do",
beforeSend : function(){
return true;
},
success : function(result){
if(result.success){
window.location.href="${APP_PATH}/user/toIndex.htm"
}else {
layer.msg(result.message, {time:1000, icon:5, shift:6});
}
},
error : function(){
layer.msg("删除用户失败", {time:1000, icon:5, shift:6});
}
});

3.后台处理数据

(1)控制器拦截处理

  • 注意:上面传来的值是个字符串,springmvc解析后应该是个结合,这个数组的属性名就是上面拼串的属性名id
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@ResponseBody
@RequestMapping("/doDeleteBatch")
public Object doDeleteBatch(Integer[] id){
AjaxResult result = new AjaxResult();
try {
int count = userService.deleteBatchUser(id);
result.setSuccess(count==id.length);
} catch (Exception e) {
result.setSuccess(false);
e.printStackTrace();
result.setMessage("删除数据失败");
}
return result;
}

(2)业务层的实现类

1
2
3
4
5
6
7
8
9
10
11
public int deleteBatchUser(Integer[] ids) {
int totalCount = 0;
for (Integer id : ids) {
int count = userMapper.deleteByPrimaryKey(id);
totalCount += count;
}
if(totalCount != ids.length){
throw new RuntimeException("批量删除失败");
}
return totalCount;
}
  • mapper就是调用通过主键id删除的方法,这里省略

(3)扩展

  • 拼串的时候也可以是多个属性拼串的,比如需要批量增加的时候,这个时候就有可能会涉及到多个属性,这个手就可以这样拼串

    1
    id=5&id=6&id=7&name='tom'&name='jack'&name='lucy'

    控制器拿到这个数据的事就就会创建两个数组,名称分别为id和name,对这两个数组里的数据按照索引取出对应的值,就可以用来批量增加了。

二、把传递的值用对象封装

1.创建一个类,用于数据的封装

  • 在工具类的包下创建一个Data.java
  • 根据需要设定泛型的类型
  • 给出getter和setter方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
public class Data {
private List<User> userList = new ArrayList<User>();
private List<User> datas = new ArrayList<User>();
private List<Integer> ids;

public List<User> getUserList() {
return userList;
}

public void setUserList(List<User> userList) {
this.userList = userList;
}

public List<User> getDatas() {
return datas;
}

public void setDatas(List<User> datas) {
this.datas = datas;
}

public List<Integer> getIds() {
return ids;
}

public void setIds(List<Integer> ids) {
this.ids = ids;
}
}

2.前端数据的封装

  • 把数据封装成一个json对象
1
2
3
4
5
var jsonObj = {};//定义一个json对象
$.each(selectCheckbox,function(i,n){
jsonObj["datas["+i+"].id"] = n.id;//把数据封装成后台定义的格式类型,方便取出
jsonObj["datas["+i+"].username"] = n.name;//把数据封装成后台定义的格式类型,方便取出
});
  • 通过ajax请求发送到后端
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.ajax({
type : "POST",
//data : idStr,
data : jsonObj,
url : "${APP_PATH}/user/doDeleteBatch.do",
beforeSend : function(){
return true;
},
success : function(result){
if(result.success){
window.location.href="${APP_PATH}/user/toIndex.htm"
}else {
layer.msg(result.message, {time:1000, icon:5, shift:6});
}
},
error : function(){
layer.msg("删除用户失败", {time:1000, icon:5, shift:6});
}
});

3.后台数据的处理

(1)控制器接收数据

  • 把接收到的数据用Data类封装
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@ResponseBody
@RequestMapping("/doDeleteBatch")
public Object doDeleteBatch(Data data){
AjaxResult result = new AjaxResult();
try {
int count = userService.deleteBatchUserByVO(data);
result.setSuccess(count==data.getDatas().size());
} catch (Exception e) {
result.setSuccess(false);
e.printStackTrace();
result.setMessage("删除数据失败");
}
return result;
}

(2)方式一:业务层的实现类

  • 通过data对象进行封装得到的值
1
2
3
public int deleteBatchUserByVO(Data data) {
return userMapper.deleteBatchUserByVO(data);//传data对象
}

(3)方式一:映射文件

  • 方式一:从data对象里拿到datas

  • 这里遍历的是data对象里的datas属性,Mybatis做解析可以直接拿到

1
2
3
4
5
6
7
8
<delete id="deleteBatchUserByVO" parameterType="java.lang.Integer">
/*delete from t_user where id in (1,2,3)*/
delete from t_user
where id in
<foreach collection="datas" open="(" close=")" separator="," item="user">
#{user.id}
</foreach>
</delete>

(4)方式二:业务层的实现类

  • 传data集合
1
2
3
public int deleteBatchUserByVO(Data data) {
return userMapper.deleteBatchUserByVO(data.getDatas());//传data集合
}

(5)方式二:mapper

  • 此时,拿到的是一个集合
1
int deleteBatchUserByVO(List<User> userList);

(6)映射文件

  • 此时遍历的集合名不能写为userList,Mybatis把集合的名设为list,如果想用userList,需要在mapper类中加上@Param(“userList”)
1
2
3
4
5
6
7
8
<delete id="deleteBatchUserByVO" parameterType="java.lang.Integer">
/*delete from t_user where id in (1,2,3)*/
delete from t_user
where id in
<foreach collection="list" open="(" close=")" separator="," item="user">
#{user.id}
</foreach>
</delete>
  • 注意Mybatis的规定:
  • 如果mapper接口参数类型为Collection集合,那么,可以使用list来获取这个集合的参数
  • 如果mapper接口参数类型为Array数组,那么,可以使用array来获取这个数组的参数
文章作者: Danqing
文章链接: http://yoursite.com/2019/02/07/ajax%E5%90%91%E5%90%8E%E7%AB%AF%E4%BC%A0%E5%A4%9A%E4%B8%AA%E5%80%BC/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 DanqingBlog
打赏
  • 微信
  • 支付宝

评论