关于前端将一个集合传递到后端

最近做作业遇到一个问题。

先说说一下整体的逻辑结构吧。我在做添加的时候，添加单选题题目需要在前端向后端发送一个“题目”的数据结构，和题目的题目选项发送给后端。

附上各个标签参数图1

图1 form表单中的数据

在前端输入数据后发送ajax将需要的值包装一下然后发送

前端发送的值，如下图图2

图2 ajax传递值

附上optionJson的获取方法图3

图3 optionJson【】的获取

 var catId = localStorage.getItem("catId")console.log(catId)function optionJsonOptionContent() {//获得name相同的标签包装成集合// [{"optionName":"A","content":"111","flag":1},
//        {"optionName":"B","content":"222","flag":0},
//        {"optionName":"C","content":"333","flag":0},
//        {"optionName":"D","content":"444","flag":0}]var optionJson = []var length = $("textarea[name='optionsJson']").lengthfor (var i = 0; i < length; i++) {var obj = new Object()//获得 name相同的第i个的值   .valueobj.content = $("textarea[name='optionsJson']")[i].value//获得 name相同的第i个的id的字符串的最后一个字符   .substr(-1)obj.optionName = $("textarea[name='optionsJson']")[i].id.substr(-1)console.log($("#flag").val())if (obj.optionName == $("#flag").val()) {obj.flag = 1} else {obj.flag = 0}optionJson.push((obj))console.log(obj)console.log($("textarea[name='optionsJson']")[i].value)}console.log(optionJson)console.log($("#type").val())console.log(JSON.stringify(optionJson))return optionJson}

ajax请求的结构如下图图4

图4ajax添加题目请求结构

    //发异步，把数据提交给后台$.ajax({url: config.ApiHost + "library/question/addQuestion",type: "post",data: {score: $("#score").val(),type: $("#type").val(),img: $("#img").val(),catId: catId,status: 1,answer: $("#answer").val(),content: $("#content").val(),optionsJson: optionJsonOptionContent(),},success: function (data) {console.log(data);if (data.code === "0") {myLayer.showSuccessMsg(data.msg, function () {xadmin.close();xadmin.father_reload();})} else {myLayer.showErrorMsg(data.msg);}},error: function (xhr, info) {myLayer.showErrorMsg(xhr.status + info);}})

理想情况生成的 optionJson【】的值图5 前端页面打印optionJson【】

图 5.1 前端console。log

图 5.2 浏览器打印

图 5.3 打印将对象转为字符串

图 5.4 浏览器打印将对象转为字符串

图5.5后端控制器接口代码

  //    /编辑页面按照id获得当前对象的值@RequestMapping("/addQuestion")public Object addQuestion(EduLibraryQuestion qt, String optionsJson) {System.out.println("添加题目" + qt);System.out.println("optionsJson的字符串" + optionsJson);if (StringUtil.isNullString(qt.getContent()) || qt.getCatId() == null || qt.getScore() == null || qt.getType() == null) {return BaseResponse.paramError();}List<EduLibraryQuestionOptions> list = null;if (! StringUtil.isNullString(optionsJson)) {list = JSON.parseArray(optionsJson, EduLibraryQuestionOptions.class);System.out.println(list.toString());}questionService.add(qt, list);return BaseResponse.success();}

图5.6控制器打印获得的字符串和将字符串转换为对象集合的结果

此时问题出现了，能够获得这个字符串，但是将字符串转换为对象后，对象虽然能创建，但是对象的值全部是空的，空创了这些对象。这是因为什么？

于是在网上查询，搜索帖子看到说是有因为在前端的字符串格式有问题，随机去查看，

需要的前端数据结构就是这种，于是排除了因为前端传递的值不对这一问题。

在此期间修修改改，改了很多地方，最后总结了在java后端json字符串转对象可能引起值为空的几个原因

1：前端传递给后端的值与后端接受的数据结构不一致

1.1：注意后端接收的model对象是否存在前端传递的字段名

1.2：注意大小写的区分，

1.3：前后端传递值的名字是否都一样

2：前端的json对象字符串不规范，少引号，或者多逗号等

3：java后端将json字符串转对象的方式不对，

3.1：json字符串转java对象

JSON.parseArray(JSON字符串, 要转换的对象.class)

3.2：Java对象转换成json

JSONObject json = new JSONObject(String jsonString);

3.3：字符串转换成Java对象（既解析json）

JSONArray jsonArray = JSONArray.fromObject(Object obj);

3.4：java集合转换成Json集合

JSONArray jsonArray = JSONArray.fromObject(Object obj);

他们都要使用com.alibaba.fastjson这个工具包来完成Java对象(或集合)与json对象(或集合)之间的转换

最后附上ajax请求

  //发异步，把数据提交给后台$.ajax({url: config.ApiHost + "library/question/addQuestion",type: "post",data: {score: $("#score").val(),type: $("#type").val(),img: $("#img").val(),catId: catId,status: 1,answer: $("#answer").val(),content: $("#content").val(),optionsJson: JSON.stringify(optionJsonOptionContent()),},success: function (data) {console.log(data);if (data.code === "0") {myLayer.showSuccessMsg(data.msg, function () {xadmin.close();xadmin.father_reload();})} else {myLayer.showErrorMsg(data.msg);}},error: function (xhr, info) {myLayer.showErrorMsg(xhr.status + info);}})

后端接口如下

关于前端将一个集合传递到后端相关推荐

前端传递给后端且通过cookie方式,尽量传递id
前端传递给后端且通过cookie方式,尽量传递id 转载于:https://www.cnblogs.com/classmethond/p/10721549.html
前端使用AngularJS的$resource,后端ASP.NET Web API，实现增删改查
首页 > 技术 > 编程 > NET > 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查前端使用AngularJS的$res ...
axios 上传文件_聚是一团火散作满天星，前端Vue.js+elementUI结合后端FastAPI实现大文件分片上传...
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_175 分片上传并不是什么新概念,尤其是大文件传输的处理中经常会被使用,在之前的一篇文章里:python花式读取大文件(10g/50 ...
前端html页面如何结合后端,前端开发与后台交互机制
传统开发模式: 一般传统上的开发协作模式有两种: 一种是前端先写一个静态页面,写好后,让后端去套模板.静态页面可以本地开发,也无需考虑业务逻辑只需要实现View即可.不足是还需要后端套模板,这些前端代 ...
【前端44_前后端交互_跨域】前端解决：JSONP、后端解决：CORS 、后端代理
文章目录跨域什么是跨域前端解决: JSONP 实现原理步骤前端:创建标签,拼接传递参数后端:接收值,返回值封装 Ajax 代码在封装的 Ajax 中添加 JSONP 需求思路练习: ...
如何将一个集合里的对象进行计算再排序
如何将一个集合里的对象进行计算再排序 1.原来获取到的数据格式(数据格式示例) [{"id": 1, "userName": "像我这样的人" ...
开发转测试没人要_前端开发，测试，后端，该如何选择？
一般来说前端会比后端简单一些的,初学者或者转行可能考虑前端多一点,但是后端开发的薪水又比前端高一些,就是比较枯燥. 前端开发我目前一直在自学前端,从网上找资料,然后听课,只要是对编程有兴趣,应该都能 ...
vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）
vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈) 这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习文章目录 vue学习笔记-01-前端的发展历 ...
【前端】第一章前端三要素、前后端分离的演变史
第一章前端三要素.前后端分离的演变史文章目录第一章前端三要素.前后端分离的演变史一.前端三要素结构层(HTML) 表现层(CSS) 行为层(JavaScript) 二.前后端分离的演变史 ...

关于前端将一个集合传递到后端

关于前端将一个集合传递到后端相关推荐

最新文章

热门文章