精华内容
下载资源
问答
  • vue前端传数组到后端

    万次阅读 2018-07-11 09:04:56
    前端传数组到后端后端需要注意接收数组的类型后端接收前端传过来的string数组前端发送

    从前端传数组到后端,后端需要注意接收数组的类型

    后端接收前端传过来的string数组


    前端发送


    展开全文
  • vue中使用post向后端发送数据,数据格式如下 {key: "test", description: "test", pages: Array(8)} description: "test" key: "test" pages: Array(8) 0: "Dashbord" 1: "Permission" 2: "PageUser" 3: ...

    问题背景:

    在vue中使用post向后端发送数据,数据格式如下

    {key: "test", description: "test", pages: Array(8)}
    description: "test"
    key: "test"
    pages: Array(8)
    0: "Dashbord"
    1: "Permission"
    2: "PageUser"
    3: "PageAdmin"
    4: "Roles"
    5: "MonitorMain"
    6: "MonitMain"
    7: "HostManage"
    length: 8
    

    其中post在使用axios发送时进行了拦截处理

    export default {
      post(url, data) {
        return $axios({
          method: 'post',
          url,
          data: Qs.stringify(data),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
      },
    

    后端使用的是flask restful webapi
    接收数据的方法如下:

    @jwt_required
        def post(self):
            claims = get_jwt_claims()
            form = request.form.to_dict()
            print(form)
    

    数据中的数组在传到后端之后变成了字典的形式:

    {'key': 'test', 'description': 'tet', 'pages[0]': 'Dashbord', 
    'pages[1]': 'Permission', 'pages[2]': 'PageUser', 
    'pages[3]': 'PageAdmin', 'pages[4]': 'Roles',
     'pages[5]': 'MonitorMain', 'pages[6]': 'MonitMain', 'pages[7]': 'HostManage'}
    

    解决问题:

    在前端对发送的数据中的数组用json进行格式化处理

    newTab.pages = window.JSON.stringify(treeKeys) 
    

    其中newTab是我创建的存储数据的对象,treeKeys就是数组数据,在处理之后,后端接收的数组就变成了字符串的形式。
    如果你需要的是数组的形式,你可先将[]和""去除,然后用split(",")将它变为数组。

    {'key': 'test', 'description': 'test', 'pages': '["Dashbord","Permission","PageUser","PageAdmin","Roles","MonitorMain","MonitMain","HostManage"]'}
    

    加一个window是因为我是在vue中进行处理的,调用JSON需要在前面加一个window。

    原因分析:

    这是使用python框架时框架自定义的处理一个键带多个值的方案。使用JSON.stringfy的方法是将数组序列化成字符串,所以传递到后端就不会出现这个问题了。

    展开全文
  • 前端传入数组后端 的解决方案 (Java后端) 如果你还不了解后端需要的参数类型,那么请先看 –>** 点我传送 在了解后端需要什么参数之后,那我们只需要将参数转换为想要的就行了! 这里我提供我自己...

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

    如果你还不了解后端需要的参数类型,那么请先看 –>** 点我传送


    在了解后端需要什么参数之后,那我们只需要将参数转换为想要的就行了!
    这里我提供我自己写好的函数,费了大半天时间!如果对你有所帮助,请给我文章点个赞把!!

    实现代码:

    <!DOCTYPE html >
    
    <head>
        <meta charset="utf-8" />
        <title>前台传入数组 至 Java后台的解决方案</title>
    </head>
    
    <body>
        <script>
            var data = {
                id : 1,
                name : 'qiaolin',
                sex : '男',
                role : [
                    {id:1, name:'管理员',
                        menu:[
                        {id : 1, name : '我的空间'},
                        {id : 3, name : '角色管理'}]
                    },
                    {id:2, name:'阿帅',
                        {id : 1, name : '人脸识别'},
                        {id : 1, name : '管理女友'}]
                    },
                    {id:3, name:'司草',
                        menu:[{id : 2, name : "管理object"}]
                    }
                ],
            };
    
            function parseJson(data, newData, prefix, isArray) {
                if(!prefix){
                    prefix = '';    
                }
                // 循环所有键
                for(var key in data) {
                    var element = data[key];
                    if(element.length > 0 && typeof(element) == "object") {
                        var tempPrefix;
                        if(isArray ){
                            tempPrefix = prefix + '.'; 
                        }
                        if(prefix){
                            tempPrefix = tempPrefix ? tempPrefix : prefix + '.' + key;
                        }else{
                            tempPrefix = key;
                        }
                        parseJson(element, newData,  tempPrefix, true);                     
                    } else if(typeof(element) == "object"){
                        var tempPrefix;
                        if(isArray){
                            tempPrefix = prefix + '[' + key + ']';
                        }else if(prefix){
                            tempPrefix = prefix + '.' + key;
                        }else{
                            tempPrefix =  key;
                        }
                        parseJson(element, newData,  tempPrefix, false);
                    }else {  
                        if(typeof(element) == 'undefined' || !element){
                            continue;
                        }
                        if(!prefix){
                            newData[key] = element;
                        }else if(isArray){
                            newData[prefix + '[' + key + "]"] = element;
                        }else{
                            newData[prefix + '.' + key ] = element;
                        }
    
                    }
    
                }
            }
    
            var newData = {};
            parseJson(data, newData);
    
            debugger;
        </script>
    </body>

    效果图:

    这里写图片描述

    展开全文
  • 前台传入数组 至 Java后台的解决方案 环境需求: 前端:无 后端:spring mvc 其实我也是不知道其他mvc框架封装请求参数是不是一样的,可以自己试试看! 解决方案: 后端的业务比如是一个用户对应多个角色...

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

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

    环境需求:

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

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

    解决方案:

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

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

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

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

    Controller 请求方法
    @RequestBody必须加上

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

    前端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){
        }
    });
    

    做好前面的工作如果发送请求前端还出现:
    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 {
        }
    
    }
    

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

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

    展开全文
  • 在一次项目中需要使用ajax一个数据后台,测试时发现后台一直都获取不到数组。 然后查资料发现将traditional指定为true就好啦! 接收方式为: 由于默认为false,所以这里需要指定为true。
  • 前端接受数据的初始化需要为 Array 类型,而不是 [ ] data(){ return { orderList:{ type:Array } } } 写成下面是接收不数据的 data(){ return { orderList:[] } } 参考链接:https://segment...
  • 使用element-ui的select框选择多项传递到后端报错, 无法传输, 因为选择的是数组,   先说解决方法: 我后端接口用@RequestBody ContentQueryForm contentQueryForm 来接收前端传递来的字段值 @ApiOperation(&...
  • 使用环境:前端 vue + axios,后端 springBoot 前端 save() { const data = [] // 图片对象数组 data.push({ gpGid: this.gId, gpAddress: this.imgList[0], gpIsCover: 1, }) this.$axios({ ...
  • 点击切换Tag标签、传递选中的checkbox数组到后端点击切换Tag数组1.html代码片段js中data数据:js代码片段:传递选中的checkbox数组到后端html代码片段data全局变量js代码片段 点击切换Tag数组 功能:点击通过for循环...
  • 前端代码: var array = [object,object,.......]; this.$axios.post( "URL地址", array ).then((value) => { }).catch((value) => { this.$message.error("") }) 后端代码: addList(@RequestBody...
  • 不仅前端控制台很怪异,后端肯定也收不这个字段的数据。 解决方法 axios 首先import qs from 'qs’,其次需要参数序列化 paramsSerializer // 接口请求 export function permissionUpd(roleId, menuIds, ...
  • 前端数组形式,后端对象形式怎么拿数据 把数组.push一下再获取就可以了 <view > <map class="map" scale="14" :latitude="latitude" :longitude="longitude" :markers="covers"> </...
  • 二维数组发起request请求时,需要用$set请求 获取后端数据时不可 像以下这样直接请求套请求,需要请求里套一个方法 this.$http .get('addons/shopro/coupons/index',{ params: { type: index }}) .then(res => {...
  • 前端传的对象及对象数组: 通过post请求传值给后端后端数据通过JSON字符串转对象拿要给的对象和对象列表 这样就可以拿到前端传过来的多个对象和对象数组
  • 用axios前台代码: ... //菜单id [1,2,3]数组 this.$axios.get("/api/epidemic/roleMenus/addBath1",{params:{roleid:this.roleid,menusid:menus_id}}).then((result)=>{ console.log(result)
  • // 这是前端vue发送的axios请求 saveEditForm(val) { console.log(val, "val****") // let email = Qs.stringify(val.email) // let id = Qs.stringify(val.id) // let nickName = Qs.stringify(val.nickName)...
  • Web开发常见问题——跨域前端Vue(axios)解决方案前端JQuery+后端解决方案Java后端解决方案PHP后端解决方案后端其他解决方案写在最后 前端Vue(axios)解决方案 vue/cli 3+ 项目根目录下(不是src目录下)新建文件 “vue...
  • 前段时间写的项目中写前端页面json数组到后台的一个功能,一开始本来是好的,后来过了段时间别的地方也要写这个功能,就照着之前写的,没想到这次报了400的错误。 前端用的vue+elementui,后台是springboot ...
  • 项目名称:vue-fds_music项目作者:符道胜开源许可协议:Apache-2.0项目...本项目前端均是作者独立自主开发,所用技术栈:Vue全家桶+better-scroll+axios。后端接口来源及 API 安装可前往项目主页查看具体文档。项目...
  • vue传数组到后台

    千次阅读 2020-02-25 11:38:47
    使用框架有resful,spring,vue 前台: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <...
  • } /** * 将字节数组转换为十六进制字符数组 * * @param data byte[] * @param toLowerCase true 换成小写格式 , false 换成大写格式 * @return 十六进制char[] */ public static char[] encodeHex(byte[] data...
  • 由于axios默认发送数据时,数据格式是Request Payload,而并非我们常用的Form Data格式,后端数据就为null,所以在发送之前,需要使用qs模块对其进行处理。 他们的格式: Request Payload:...
  • 1.将后端接收改为数组 或 2.将数组先用JSON转一次,再加入对象,再用qs来转 结果: array [{"name":"a","id":1},{"name":"b","id":2},{"name":"c","id":3}] number 1 string STRING  
  • 基于element和vue的一个简单的后台管理页面基础模型(这里我用了php从数据库获取数据然后在JS区域接收了获取的数据。PS:不会用axios)直接附上所有代码:数据库:mywu 用户名:root 密码:root 数据表:testheader(...
  • vue 绑定对象数组到页面上,改变对象值dom元素不更新 使用场景,在调用一个后端接口得到返回数据后,将返回的对象数组(类似这种resData:[{key:value}])绑定页面上循环遍历v-for=(item,index) of list。而页面里...
  • 已获取数据并在页面上显示,但是是一段文字效果,想问下,如何才能给文字换行?HTML 代码获取后端数据代码回答让后端返回给你带标签的形式:1.xxx2.xxx要是前端处理的话我认为不合理。虽然前端也能处理。首先后端...
  • 前端数组如何传到后台

    千次阅读 2019-07-03 23:49:37
    前端数组如何传到后台 1.普通数组 如:var array = [‘a’, ‘b’, ‘c’] 前端将数组用toString()方法将数组转化成字符串传给后端后端用split方法将字符串转化成数组 2.json数组 如 var jsonArray = [{name: ...
  • params:{//因为后端需要过去一个token才可以不被拦截所以加上了,看各自情况,可以不加 "token":token } }) params是我设置的请求头,token是放入请求头的数据,如果后端不需要可以不加 2.在我们的页.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,938
精华内容 4,375
关键字:

vue前端传数组到后端

vue 订阅