精华内容
下载资源
问答
  • 因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有的,所以在把json数组的数据添加进data()函数里的数组的时候动态的...

    因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有的,所以在把json数组的数据添加进data()函数里的数组的时候动态的添加一些数据。

    1.首先获取后端的json数据:

    var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));

    1

    successResponse是服务器响应内容,其中包含json数据。这里涉及到一个json格式转化问题,因为响应内容successResponse是个对象,所以我们需要先用stringify函数把json转成字符串形式。但因为后面要获取json里面指定的key对应的value,并且自定义添加一些数据,所以我们还需要用parse函数转成Json对象形式(也叫json序列化)。有的朋友就会问了,为什么不直接使用successResponse.data.data?还要转来转去?因为原本不是json对象。是HttpServletResponse对象。

    2.遍历json数组对象,添加自定义数据

    for (var i = 0; i < jsonObj.length; i++) {

    jsonObj[i].index='table'

    }

    1

    2

    3

    给json数组对象的每个位置添加自定义内容index:‘table’。

    这里数组对象里原来是没有index这个key的,但是会自己添加进去。

    3.将改造后的json数组对象传给data()里声明的数组。

    this.items[1].subs=jsonObj;

    1

    最后贴上组件的完整代码:

    <>

    import bus from '../common/bus';

    export default {

    data() {

    return {

    responseResultData: [],

    // menuName: '',

    collapse: false,

    items: [{

    icon: 'el-icon-lx-home',

    index: 'dashboard',

    menuName: '系统首页'

    },

    {

    icon: 'el-icon-lx-cascades',

    index: '1',

    menuName: '基础表格',

    subs: []

    },

    {

    icon: 'el-icon-lx-copy',

    index: 'tabs',

    menuName: 'tab选项卡'

    },

    {

    icon: 'el-icon-lx-calendar',

    index: '3',

    menuName: '表单相关',

    subs: [{

    index: 'form',

    menuName: '基本表单'

    },

    {

    index: '3-2',

    menuName: '三级菜单',

    subs: [{

    index: 'editor',

    menuName: '富文本编辑器'

    },

    {

    index: 'markdown',

    menuName: 'markdown编辑器'

    },

    ]

    },

    {

    index: 'upload',

    menuName: '文件上传'

    }

    ]

    },

    {

    icon: 'el-icon-lx-emoji',

    index: 'icon',

    menuName: '自定义图标'

    },

    {

    icon: 'el-icon-lx-favor',

    index: 'charts',

    menuName: 'schart图表'

    },

    {

    icon: 'el-icon-rank',

    index: '6',

    menuName: '拖拽组件',

    subs: [{

    index: 'drag',

    menuName: '拖拽列表',

    },

    {

    index: 'dialog',

    menuName: '拖拽弹框',

    }

    ]

    },

    {

    icon: 'el-icon-lx-warn',

    index: '7',

    menuName: '错误处理',

    subs: [{

    index: 'permission',

    menuName: '权限测试'

    },

    {

    index: '404',

    menuName: '404页面'

    }

    ]

    }

    ]

    }

    },

    computed: {

    onRoutes() {

    return this.$route.path.replace('/', '');

    }

    },

    created() {

    // 通过 Event Bus 进行组件间通信,来折叠侧边栏

    bus.$on('collapse', msg => {

    this.collapse = msg;

    });

    this.getMenu();

    },

    methods: {

    getMenu() {

    this.$axios

    .get('/api/admin/system/menu/list')

    .then(successResponse => {

    //获取json中的data部分

    if (successResponse.data.code === 200) {

    var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));

    var newArray= new Array()

    for (var i = 0; i < jsonObj.length; i++) {

    jsonObj[i].index='table'

    }

    this.items[1].subs=jsonObj;

    console.log(this.items[1].subs);

    }

    })

    .catch(failResponse => {}).catch(error => {

    console.log(error.response.data.code)

    })

    },

    }

    }

    >

    .sidebar {

    display: block;

    position: absolute;

    left: 0;

    top: 70px;

    bottom: 0;

    overflow-y: scroll;

    }

    .sidebar::-webkit-scrollbar {

    width: 0;

    }

    .sidebar-el-menu:not(.el-menu--collapse) {

    width: 250px;

    }

    .sidebar>ul {

    height: 100%;

    }

    ---------------------

    作者:古今

    原文:https://blog.csdn.net/csonst1017/article/details/85710904

    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • 版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在...因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端json没有...

    版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在明显的谬误,请留言说明原因再踩哦,谢谢,我也可以知道原因,不断进步!https://blog.csdn.net/csonst1017/article/details/85710904

    因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有的,所以在把json数组的数据添加进data()函数里的数组的时候动态的添加一些数据。

    1.首先获取后端的json数据:

    var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));
    

    successResponse是服务器响应内容,其中包含json数据。这里涉及到一个json格式转化问题,因为响应内容successResponse是个对象,所以我们需要先用stringify函数把json转成字符串形式。但因为后面要获取json里面指定的key对应的value,并且自定义添加一些数据,所以我们还需要用parse函数转成Json对象形式(也叫json序列化)。有的朋友就会问了,为什么不直接使用successResponse.data.data?还要转来转去?因为原本不是json对象。是HttpServletResponse对象。

    2.遍历json数组对象,添加自定义数据

    for (var i = 0; i < jsonObj.length; i++) {
    	jsonObj[i].index='table'+jsonObj[i].menuId;
    }
    

    给json数组对象的每个位置添加自定义内容index:‘table’。
    这里数组对象里原来是没有index这个key的,但是会自己添加进去。

    3.将改造后的json数组对象传给data()里声明的数组。

    this.items[1].subs=jsonObj;
    

    在这里插入图片描述

    4.运行vue项目并请求后端:
    增加内容前的json数组(console.log输入到console查看):
    在这里插入图片描述

    增加后:
    在这里插入图片描述

    可以看到数组每个下标内容都添加上了index+id。

    最后贴上组件的完整代码:

    <template>
    	<div class="sidebar">
    		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
    		 text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
    			<!-- <el-button @click="getMenu()">lianjie</el-button> -->
    			<template v-for="item in items">
    				<template v-if="item.subs">
    					<el-submenu :index="item.index" :key="item.index">
    						<template slot="title">
    							<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>
    						</template>
    						<template v-for="subItem in item.subs">
    							<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
    								<template slot="title">{{ subItem.menuName }}</template>
    								<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
    									{{ threeItem.menuName }}
    								</el-menu-item>
    							</el-submenu>
    							<el-menu-item v-else :index="subItem.index" :key="subItem.index">
    								{{ subItem.menuName }}
    							</el-menu-item>
    						</template>
    					</el-submenu>
    				</template>
    				<template v-else>
    					<el-menu-item :index="item.index" :key="item.index">
    						<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>
    					</el-menu-item>
    				</template>
    			</template>
    		</el-menu>
    	</div>
    </template>
    
    <script>
    	import bus from '../common/bus';
    	export default {
    		data() {
    			return {
    				responseResultData: [],
    				// menuName: '',
    				collapse: false,
    				items: [{
    						icon: 'el-icon-lx-home',
    						index: 'dashboard',
    						menuName: '系统首页'
    					},
    					{
    						icon: 'el-icon-lx-cascades',
    						index: '1',
    						menuName: '基础表格',
    						subs: []
    					},
    					{
    						icon: 'el-icon-lx-copy',
    						index: 'tabs',
    						menuName: 'tab选项卡'
    					},
    					{
    						icon: 'el-icon-lx-calendar',
    						index: '3',
    						menuName: '表单相关',
    						subs: [{
    								index: 'form',
    								menuName: '基本表单'
    							},
    							{
    								index: '3-2',
    								menuName: '三级菜单',
    								subs: [{
    										index: 'editor',
    										menuName: '富文本编辑器'
    									},
    									{
    										index: 'markdown',
    										menuName: 'markdown编辑器'
    									},
    								]
    							},
    							{
    								index: 'upload',
    								menuName: '文件上传'
    							}
    						]
    					},
    					{
    						icon: 'el-icon-lx-emoji',
    						index: 'icon',
    						menuName: '自定义图标'
    					},
    					{
    						icon: 'el-icon-lx-favor',
    						index: 'charts',
    						menuName: 'schart图表'
    					},
    					{
    						icon: 'el-icon-rank',
    						index: '6',
    						menuName: '拖拽组件',
    						subs: [{
    								index: 'drag',
    								menuName: '拖拽列表',
    							},
    							{
    								index: 'dialog',
    								menuName: '拖拽弹框',
    							}
    						]
    					},
    					{
    						icon: 'el-icon-lx-warn',
    						index: '7',
    						menuName: '错误处理',
    						subs: [{
    								index: 'permission',
    								menuName: '权限测试'
    							},
    							{
    								index: '404',
    								menuName: '404页面'
    							}
    						]
    					}
    				]
    			}
    		},
    		computed: {
    			onRoutes() {
    				return this.$route.path.replace('/', '');
    			}
    		},
    		created() {
    			// 通过 Event Bus 进行组件间通信,来折叠侧边栏
    			bus.$on('collapse', msg => {
    				this.collapse = msg;
    			});
    			this.getMenu();
    		},
    		methods: {
    			getMenu() {
    				this.$axios
    					.get('/api/admin/system/menu/list')
    					.then(successResponse => {
    						//获取json中的data部分
    						if (successResponse.data.code === 200) {
    							var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));
    							console.log("增加内容前:"+JSON.stringify(jsonObj));
    							for (var i = 0; i < jsonObj.length; i++) {
    								jsonObj[i].index='table'+jsonObj[i].menuId;
    							}
    							this.items[1].subs=jsonObj;
    							console.log("增加内容后:"+JSON.stringify(this.items[1].subs));
    						}
    					})
    					.catch(failResponse => {}).catch(error => {
    						console.log(error.response.data.code)
    					})
    			},
    		}
    	}
    </script>
    
    <style scoped>
    	.sidebar {
    		display: block;
    		position: absolute;
    		left: 0;
    		top: 70px;
    		bottom: 0;
    		overflow-y: scroll;
    	}
    
    	.sidebar::-webkit-scrollbar {
    		width: 0;
    	}
    
    	.sidebar-el-menu:not(.el-menu--collapse) {
    		width: 250px;
    	}
    
    	.sidebar>ul {
    		height: 100%;
    	}
    </style>
    
    
    展开全文
  • var arr = [1, 2 , 3, 4]; 数组接受不了 字符串总...将数组转换成 字符串 传给后端 传过去之后 让后端 自己分割 取出自己需要的参数就行了 换种方法就解决 var data = arr.join('-'); 关注我 持续更新前端知识 ...

    var  arr = [1, 2 , 3, 4];

    数组接受不了  字符串总能接受吧 

    将数组转换成 字符串  传给后端   传过去之后 让后端 自己分割 取出自己需要的参数就行了  换种方法就解决   

    var data = arr.join('-');

    关注我 持续更新前端知识

    展开全文
  • 代码: 前端: $.ajax({ type:'POST', url:'/deletefile', data:{"filelist":filelist}, dataType:'JSON', traditional:true, ...

    代码
    前端:

    $.ajax({
                    type:'POST',
                    url:'/deletefile',
                    data:{"filelist":filelist},
                    dataType:'JSON',
                    traditional:true,
                    success: function () {
    
                        alert("删除成功");
                    }
                })
    

    Django后端:

    filelist = request.POST.getlist('filelist')
            for file in filelist:
                print(file)
    
    展开全文
  • JS传递数组给PHP后端

    2020-05-11 14:06:29
    前端无法直接传递数组给后端,需要先将数组转化为JSON字符串格式,PHP接收JSON字符串后再将其转化为数组进行使用。 1.JS将数组转化为JSON字符串 JSON.stringify(data) 2.PHP将JSON字符串转化为数组 json_...
  • php具有强大的后端处理能力,其生成的数据,尤其是数组,通过json传递给javascript.本文中演示的例子是一个文件的数据传送。
  • function batchEditSubmit() { // var data=$("#batchEdit"...:JSON.stringify(ids)})+"&amp;" +$("#batchEdit").serialize(); console.log(data); $.aja...
  • 前端给后端传递json数组时,后端的形参名要与前端的对应。 后端形参 前端形参
  • 项目采用springboot框架,通过jquery.post()方法传递给后端,示例代码如下: 前端js传值代码: var list=[]; list.push("740627156@qq.com"); list.push("2787706997@qq.com"); var postDa...
  • 循环赋值数组vararrRow=newArray(); for(vari=0;i<checkedArr.length;i++){ arrRow[i]=checkedArr[i].FUN_ID;...}ajax传json数组后端$.ajax({ url:"role.do?method=funcRoleAdd", type:"po...
  • 这里是前端向后端传递一个数组的方式,参考下面这个示例: (主要是将前端的数组,用 JSON.stringify()方法json化一下,然后后端springmvc接收到以后,使用 JSONArray来进行处理)参考文章:... ...
  • 前端传递数组给后端, 首先创建数组对象, var cartItemId = new Array(); 将数据存入数组中后,使用stringify将数组字符串化, cartItemId = JSON.stringify(cartItemId); 用$.ajax()方法传给后端进行处理...
  • axios get方法传递数组

    万次阅读 2019-03-07 15:27:07
    axios的get方法中使用params时对于js数组类型的参数的默认操作比较奇怪,会使得参数名后带上’[]'字符串,如下 ...本来以为能解决问题,其实传递给后端的是’[“4”,“5”,“6”]’,后端说解析不了
  • 当我们在前端页面向后端发送请求获取数据的时候,后端使用php来访问数据库拿到数据,封装成一个数组之后怎么传递给前端呢 在PHP向JavaScript传递数组的时候不能直接向JavaScript传递php的数组,需要将PHP的数组编码...
  • 学习目的:前后端数据交换思路:json...遇到问题:用ajax接收数据直接赋值了变量,发现里面是一个数组。在php中不知道怎么传递数据?(或者说ajax的xmlhttp.responseText是怎么获取后端数据的?)php中把对象和数组...
  • 当我们要将前端的js数组提交到后端并转化为list,继而又需要将后端的list传到前端转化为js数组的时候,JSON作为中间过渡的格式,必不可少。在此详细总结下。 编程组件 Struts2, FastJson, LigerListBox, ...
  • 很多的时候我们需要给后端的数据不是几个单独的数据,一般见到的代码的是这样的: data: { id : id, name : name, sex : sex } 这样的是最常见的一种数据格式,常用的是注册和登录,结合jQuery将用户输入的用户...
  • 首先在小程序端想传递一个数组给服务端 很明显这个数组的长度是3但是看文档 被坑,在java端接收到以后的不是数组了直接变为string,本来一直使用数组遍历,后来发现根本不行,解决方案 String coupons = ...
  • 目录 @RequestBody 概述 接收单个 String 参数 接收 字符串数组 参数 接收 List<Map<String,Object>...1、@RequestBody 主要用来接收前端传递给后端json 格式的数据的(请求体中的数据的) 2、...
  • 后端各种语言怎么将自己内容转换成json格式的内容? 前端怎么接收json数据?有几种方式? js中怎么将json数据转换成js中的数组,对象来使用? 遇到问题: 用ajax接收数据直接赋值了变量,发现里面是一个数组...
  • 我们知道前端传递给后端一个字段的值为[{id: 1, name: '张三'}, {id:2, name: '李四'}],我们在存储到数据库中看到的值变成了['[object]', '[object]']这种形式,显然是数据库强制更改了我们存入的数据类型值,所以...

空空如也

空空如也

1 2 3
收藏数 49
精华内容 19
关键字:

给后端传递json数组