前端如何接收后端传递过来的集合,并成功显示???

1.为什么后端会传递过来一个集合?
当前端需要同时接收两个对象的时候,那么什么时候是这中情况呢,
栗子:当前端需要接收用户信息以及分页对象(包括页码和页面最大数据量),这个时候,很明显是两个对象,那么怎么同时传递过去呢?
有人会说,controller层modelMap,Map等都可以啊,关键是需要ajax去接收,那么ajax接收的json数据是一个大块数据,接收到之后再进行拆分,这时ajax希望得到的,而不是多个对象分开的,你可以理解为把多个对象进行打包,然后统一给前端,这种情况前端如何接收?以及前端如何显示?
2.解决上述两个问题
第一,如何接收,很明显是使用ajax异步请求,局部刷新的特点,那么这时候难题就交给后端了,用什么容器来封装这些对象,我第一次没有想到集合,想到的是对象,想着把多个对象当成另一个对象的属性,这样不就行了吗,但是,这个问题我没有认真去想,很明显,我没有通过这种方式实现,而是通过list集合的方式实现,那么怎么想到的,这时秘密!!!集合去装对象,这个难度应该不大,很容易就能实现,但是创建什么样的集合,也就是说集合中的元素是什么类型呢???或许这才是需要真正思考的问题,我的理解是对象,也不是头一次就想到的,而是通过之前向前端传递数据,中间需要传递的数据就是Object,所以想着这个是不是也可以,最终是实现了
第二,前端如何显示,这就是获取接收到的值的值了,并不是获取接收到的值,接收到的数据很明显是你在后端封装的集合,拿到集合中的元素,很明显用for循环就可以实现,但是for循环结果是一个个的对象,那么这些对象是什么呢,这就得往前面说了,前面,在后端创建一个什么样的集合中,存放的数据是对象,这个对象得有一个名字,这个名字比如是A,遍历出每个集合中的元素为B,则B.A就是你需要的数据,这样就可以使用了
附加照片:
在这里插入图片描述这个是要传给前台的json,其中data就是那个传说中的集合,类型是Pu(随便定义)
在这里插入图片描述Pu中存储的数据是Object(pageUSer),对象的话,就可以装世间万事万物,很强大
在这里插入图片描述这个是分页的对象,暂时没有用到,之后肯定用到,所以在这里提前写上了
在这里插入图片描述最后这一张就是前段的重点,难点,(相对于我来说的,大佬手下留情),先接收传递过来的数据,然后对数据进行遍历,最后获取遍历之后元素中的对象,到此完整的接收后端传递过来的集合数据的存储,接收,显示,这一整套流程就走了下来,有点睁不开眼了,这都凌晨三点多了,写的优点粗糙,大致是这个意思,算是对自己之前三四个小时的忙碌做一个回顾、总结、激励吧!!!
登天难求人更难,黄连苦无钱更苦

后端传递一个集合,可以使用后端框架提供的数据结构(例如List、Set等)将集合传递前端前端可以使用JavaScript的forEach方法或者for循环遍历集合,获取需要删除的参数。当用户点击删除按钮时,可以将需要删除的参数通过Ajax发送到后端进行删除操作。删除成功后,后端可以返回操作结果,前端可以根据返回结果进行相应的处理。 以下是一个简单的示例代码: 后端Java代码: ``` @RequestMapping("/delete") @ResponseBody public Map<String, Object> delete(@RequestParam("ids") Set<Integer> ids) { // 执行删除操作 boolean success = productService.delete(ids); // 返回操作结果 Map<String, Object> result = new HashMap<>(); result.put("success", success); return result; } ``` 前端HTML代码: ``` <ul id="list"> <li data-id="1">Item 1</li> <li data-id="2">Item 2</li> <li data-id="3">Item 3</li> </ul> <button id="delete-btn">Delete Selected Items</button> ``` 前端JavaScript代码: ``` // 获取需要删除的参数 function getSelectedIds() { const selectedItems = document.querySelectorAll('#list li.selected'); const ids = []; selectedItems.forEach(item => ids.push(item.dataset.id)); return ids; } // 删除操作 function deleteItems() { const ids = getSelectedIds(); $.ajax({ url: '/delete', type: 'POST', data: { ids }, success: function(result) { if (result.success) { // 删除成功,刷新页面或者从列表中删除已删除的项 } else { // 删除失败,提示用户 } } }); } // 绑定事件 const deleteBtn = document.getElementById('delete-btn'); deleteBtn.addEventListener('click', deleteItems); const listItems = document.querySelectorAll('#list li'); listItems.forEach(item => { item.addEventListener('click', function() { this.classList.toggle('selected'); }); }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值