精华内容
下载资源
问答
  • vue给后端传递json格式的
    千次阅读
    2021-12-03 16:01:37

    很简单就一行:   headers: { "Content-Type": "application/json" }

       headers: { "Content-Type": "application/json" }

    更多相关内容
  • 如下所示: JSP var vipFee= new Array; //遍历选中的对象 $("#feeList :checkbox:checked").each(function(i){ vipFee.push({"enterpriseSeq":$(this).attr("enterpriseSeq"),"merchNo":$(this).val(),...
  • 因为项目前后端分离,前端需要获取后端传过来的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

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

    展开全文
  • 1.定义一个键值对对象 function ObjData(key,...遍历map,构造对象,写入对象数组中。 existUserMap.forEach(function (item, key, mapObj) { var s=new ObjData(key,item); //创建键值对象 existUserArray.push(s);

    1.定义一个键值对对象
    function ObjData(key,value){
    this.key=key;
    this.value=value;
    }

    2.定义一个对象数据
    var existUserArray=[]; //定义一个对象数据。
    遍历map,构造对象,写入对象数组中。
    existUserMap.forEach(function (item, key, mapObj) {
    var s=new ObjData(key,item); //创建键值对象
    existUserArray.push(s); //把对象放入对象数组中
    });

    3.把数组转换成json字符串。
    var existUserStr = JSON.stringify(existUserArray);


    4.使用post提交数据
    var data = {
    "existUserStr": existUserStr
    };
    $.post(
    "saveUsers",
    data,
    function (ret) {
    console.info(ret);
    },
    "Json" //important
    ); //post

    5.java后端处理
    @RequestMapping(value = "/saveUsers", method = RequestMethod.POST)
    @ResponseBody
    public Map<String, String> saveUsers(Model model, String existUserStr, String selectedUserStr) {
    Map<String, String> result = Maps.newHashMap();
    String msg = "成功!";
    String success = "true";
    try {
    List<ObjData> existUserList = JsonMapper.fromJson(existUserStr, List.class, ObjData.class);
    List<ObjData> selectedUserList = JsonMapper.fromJson(selectedUserStr, List.class, ObjData.class);
    System.out.println();
    } catch (Exception e) {
    log.warn("", e);
    msg = "失败 ";
    success = "false";
    }

    result.put("success", success);
    result.put("message", msg);
    return result;
    }

    6.附上jsonmapper的fromjson方法.
    // @SuppressWarnings("unchecked")
    public static <T> T fromJson(String json, Class<?> collectionClass, Class<?>... elementClasses) {
    if (json==null||json.trim().isEmpty()) {
    return null;
    }

    try {
    JavaType type = JsonMapper.getInstance().getTypeFactory().constructParametricType(collectionClass, elementClasses);
    return (T) JsonMapper.getInstance().readValue(json, type);
    } catch (IOException e) {
    logger.warn("parse json string error:" + json, e);
    e.printStackTrace();
    return null;
    }
    }

    展开全文
  • 在前后端分离项目中传参收参往往是一大难事,比如时间类型(Date)向前端传递时规范一个自己的格式导致再次从前端传到后端会出现格式错误,就需要再次转换 //将Date类型转为json(String)类型,以东八区,年月日...

    1)丶前言(问题分析):

    在前后端分离项目中传参收参往往是一大难事,比如时间类型(Date)向前端传递时规范一个自己的格式导致再次从前端传到后端会出现格式错误,就需要再次转换

    //将Date类型转为json(String)类型,以东八区,年月日形式
    @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
    //将json转换为Date类型
    @DateTimeFormat(pattern = "yyyy-MM-dd")

    而这次是前端传给后端时的一个格式错误,原因就是前端在传递数组时候是以ids[ ]=*的形式传递的 

    而后台需要的参数是不需要这个中括号的,如图正确写法

    2)丶解决方法 

    1.   我们需要先引入一个前端框架  qs

    先关闭前端项目,再引入qs框架依赖

    npm install qs --save

     2.   在依赖里查看是否有qs,并在要使用的组件中导入qs(由于并不是所有的都会用到所以不写在main.js里面)

    import qs from 'qs'

     3.   在要向后台传数组的方法里规范格式

    paramsSerializer:function (params){
         //参数格式的转化方式,返回一个格式化成功的参数
         return qs.stringify(params,{indices:false})//被格式化的内容和格式化的方式
    }

    )简化版本

    paramsSerializer:params => qs.stringify(params,{indices:false})

     

    最终结果展示 

     

     

    展开全文
  • 【JAVA】后端接收前端传递JSON数组

    千次阅读 2020-04-27 19:25:22
    } 后端接收: @RequestMapping(value = "/ChangeRoute", method = RequestMethod.POST) public boolean ChangeRoute(@RequestBody ChangeRoute[] changeRouteArray) { List<ChangeRoute> changeRouteList ...
  • 如何向spirngboot后端传递formdata数组? 前端将几个formdata对象push进了一个数组里,现在想把这个数组传向后端,请问有什么办法可以做到呢?
  • function AnnotationInfo() { var anttarray = annotationToolbar.getAnnotationManager().getAnnotationList(); if (anttarray.length >... alert(JSON.stringify(anttarray)); } $(function () {...
  • 1.引子2.前端往后台传输json数据 var jsonStr = [ { "empNo" : "1242", "deptName" : "销售部", "password" : "24284", "hobbys" : "跳舞 上网", "empName" : "小五", "sex" :...
  • 版权声明:欢迎转载,注明作者和出处就好!如果不喜欢或文章存在...因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端json没有...
  • 今天小编就为大家分享一篇axios向后台传递数组作为参数的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • ajax向后端传递数组

    千次阅读 2019-12-25 14:49:45
    通过JSON.stringify()将参数作为数组传递到后台,后台不能通过获取参数名的方式获取参数,需要通过inputstream流来读取参数。 这种方式我们传递的参数form-data中,每个参数在传递的过程中有一个参数名,...
  • 前端向后端传递json数据

    万次阅读 2019-08-02 08:52:40
    最近在使用ajax向后端传递数据时,遇到了一些问题,自己简单研究了一下,做个总结。
  • 框架-弹出选择框(Jquery传递Json数组一个button按钮,执行方法 Json传值$("body").on("click", "#btnsure", function() { ... JSON 数组的创建方式 procedure TFormDZMD.Button1Click(Sender: TObject); var ...
  • 这个时候前端我使用$qs.stringify()方法来处理参数,这个时候前端 会报415错误,上网搜索后发现报错的原因是:因为传输的参数是json对象,而请求的不是json格式. 用了网上的方法在main.js中加了个axios.defaults....
  • springboot接收前台ajax传递json数组

    千次阅读 2020-06-20 15:13:27
    写在Vue中的methods为: recycle(){ console.log(JSON.stringify(this.list)) $.ajax({ url:"http://10.0.73.199:8080/mui_recycle/recycle", data:JSON.s...
  • new JSONArray()得到json数组,循环解析我们想要的属性: var countsCheckBox = $("input[type='checkbox']:checked"); var booksid = []; for(var i=0;i<countsCheckBox.length;i++){ //使用[]取
  • 前端传json数组后端的接收

    千次阅读 2019-05-07 01:22:00
    后端接收: System.out.println("请求来自于物品详情页" ); JSONObject jsondata = JSONObject.fromObject(jsondataobj_str); JSONArray JsondataArray = JSONArray.fromObject(jsondata.get(...
  • Vue向后台传递json对象数组并取值

    千次阅读 2020-07-07 10:17:08
    Vue传递json数组,后台转为json对象及图片上传 @RequestMapping("/saveshop") @ResponseBody //shopcode要与前端js中key对应 public void name(@RequestParam("shopcode") String shopcode) { // "shopcode"前台传...
  • 后端代码: StringBuffer stringBuffer = new StringBuffer("test123"); JSONObject jo = new JSONObject(); jo.put("content", stringBuffer.toString()); try { response.setContentType("text/json"); ...
  • 然后在通过JSON转换为JSON数组之后在转为list集合这样就可以了。下面是我的代码。 如果以后遇到了要接收前端多个数组对象可以这样做 @RequestMapping("/AnswerList") public Result AnswerRadio( @Reques
  • 前端用AJAX把数组给后端控制器数组参数的方法分两种情况:1. 数组元素是基本类型数据的数组。2. 数组元素是普通类对象的数组。下面分别讲解。一、数组元素是基本类型数据的数组这种情况比较简单,下面是示例代码。...
  • 数据结构:  const testdata = [  {  id: 'string'... data: JSON.stringify...求告知 Axios 如何解决传递对象数组的问题。在下刚接触前端,还不是很熟悉。之前用过Jquery。</p>
  • HTML页面之间传递Json格式数组的方式 如下: a.html localStorage.setItem("userinfoList", JSON.stringify(list) ); b.html let list = JSON.parse(localStorage.getItem("userinfoList")) console.log("list:"+...
  • 已知如何在springmvc上在前台用jQuery的ajax传递json数据到后台用request.getParameter("xxx")获取相应参数现在有需要在前台获取多组“对象”到后台的需求。前台后台image.pngimage.pngpom依赖注意 这个依赖还可以换...
  • var arr = [1, 2 , 3, 4]; 数组接受不了 字符串总...将数组转换成 字符串 传给后端 传过去之后 让后端 自己分割 取出自己需要的参数就行了 换种方法就解决 var data = arr.join('-'); 关注我 持续更新前端知识 ...
  • 错误1:org.springframework.web.HttpMediaTypeNotSupportedException: Content type ‘application/json;charset=UTF-8’ not supported。 原因:如果想用springmvc @RequestBody注解做提交json字符串自动绑定到...
  • 前台传json数组,后台接收处理

    万次阅读 2019-06-24 23:10:49
    这里前台传过来的json数据格式是这样的 [{ "type": 0, "stem": "123", "deletionFlag": 1, "choice": ["A"], "postId": "123", "solution":["A", "B"], "score": 12.12, "materialIds": ...
  • 经过尝试, { “id”:1, [{“xxx”:123, “yyy”:234}, {“xxx”:111, “yyy”:222}] } ...的形式,然后组合上json数组,即可正常传值 [{“xxx”:123, “yyy”:234}, {“xxx”:111, “yyy”:222}] ...
  • js将json数组传递到后台及接收

    千次阅读 2016-11-01 13:13:57
    最近项目中用到需要将前台的数组传递到后台进行更新数据库,但对json数组传递这一块实在是不太懂,在网上查了好久,终于解决了,现在写个备忘录,整理一下相关的东西。 首先,根据项目需求,对多行数据进行修改,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,377
精华内容 7,750
关键字:

给后端传递json数组