当前位置:   article > 正文

前端传入数组 至后端 的解决方案 (Java后端)_前端传数组 后端用什么接收

前端传数组 后端用什么接收

前端传入数组 至后端 的解决方案 (Java后端)

一般可以分两种情况,
第一种是对象中有数组(集合),
第二种是方法直接接收集合

环境需求:
前端:无
后端:spring mvc 
其实我也是不知道其他mvc框架封装请求参数是不是一样的,可以自己试试看!
  • 1
  • 2
  • 3

第一种:对象中有集合,接收参数时是普通对象

解决方案:
后端的业务比如是一个用户对应多个角色并且他还属于一个公司那么他对应的实体类中
应该是如下的:
  • 1
  • 2
public class User{
    private Integer id;
    private String name;
    private List<Role> roleList; // 所属角色
    private Org org; // 公司
}   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
很多新手都不知道怎么入这个角色的数据进来,我刚开始也是,还记得那时候用的是字
符串拼接的,那时候前端也是个新手,于是两个人约定了一套解析规则!加号代表么,
减号代表什么!那时候可真的是辛苦啊!

其实spring mvc 已经帮我们做好了封装对象的工作,但是他也有他的规则。
以上面这个类为例!他的规则是:

@RequestMapper("test")
public void test(User user){}

1、对象中自己的属性:
    这个只需要传入的参数中跟对象属性名对应!
    例如:
    id : 111
    name : 'qiaolin'
    即可入参至test方法中的user对象

2、对象其他对象(一般类)的属性:
    需要使用其他对象的属性名.属性名入参
    例如:
    org.id : 123,
    org.name : '湖南优势智通信息技术有限公司'
    即可入参至user的org属性对象中

3、对象其他对象(集合)的属性:
    需要使用集合属性名加下标加属性名
    例如:
    roleList[0].id : 12,
    roleList[0].name : '管理员'
    即可入参至roleList属性下表为0的元素中


但是这样前端就比较麻烦了,不仅仅要管下标,还要去解决层级的关系,比如用户里面
有角色的集合,但集合中每个角色又对应了一个权限集合,相当之麻烦!但是我写了个
将json转为上面这种约定的参数!
  • 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
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

如果对你有所帮助,请给我文章点个赞把!!

点击这个超链接,带你进入json转后端能接收的参数! –> 传送门

第二种:方法直接接收集合

Controller 请求方法
@RequestBody必须加上

public AjaxJson startMidSubmitFlow(@RequestBody List<MidSubmitEntity> entitys){
}
  • 1
  • 2

前端ajax, 这里只有jquery的ajax,主要是vue的ajax我不知道怎么加请求头!
1、ajax的headers 必须加上
2、数据必须使用JSON.stringify 转成字符串

$.ajax({
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    },
    type: 'POST',
    data:  JSON.stringify(this.midSubmitSelections) ,
    url: url,
    success: function(rs){
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

做好前面的工作如果发送请求前端还出现:
Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

那么后台需要配置个拦截器!

package com.ascendant.modules.sys.interceptor;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.http.HttpStatus;
import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

/**
 *  解决跨域请求问题
 * @author qiaolin
 * @version 2018年5月24日
 *
 */

public class CorssInterceptor implements HandlerInterceptor{

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
            throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,XFILENAME,XFILECATEGORY,XFILESIZE");


        if (request.getMethod().equals("OPTIONS")) {
            response.setStatus(HttpStatus.SC_OK);
            response.getWriter().write("OPTIONS returns OK");
        }

        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
            ModelAndView modelAndView) throws Exception {
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
            throws Exception {
    }

}
  • 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
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

不了解拦截器的可以看看这边文章 –> 拦截器的用法

解决方案参考于 —> 这个错误的解决方案

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/280049
推荐阅读
相关标签
  

闽ICP备14008679号