JavaScript中操作后端用ModelAndView返回的List数据

忘是亡心i 2023-06-23 11:57 5阅读 0赞

> 在 JavaWeb 项目中，我们经常使用 ModelAndView 装入请求页面的地址和传入页面的数据，我们在 HTML 中可以用 JSTL 来操作装入在 ModelAndView 中的 List 数据

例如我们在渲染 select 的 option 选项时：

*  1、在后端我们将list数据装入 ModelAndView 中：

ModelAndView mav = new ModelAndView("/store/list");
    mav.addObject("listStore", listStore);

*  2、在页面，我们可以使用以下方式来渲染 option 选项：

<c:forEach var="item" items="${listStore}">
        <option value="${item.id }">${item.name }</option>
    </c:forEach>

*  3、当然，我们还需要在页面中引入 JSTL ，在 jsp 头部加上：

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

那当我们需要在js代码中使用装入在 ModelAndView 中的 listStore 怎么办呢？

*  1、那我们在装入 ModelAndView 中时，就需要进行如下操作：

mav.addObject("listStore", JSONArray.toJSONString(listStore));

这里，我们使用 Alibaba 的 FastJson 将 List 进行转化成 JSONString

*  2、我们在 js 中可以这样来接收并使用它：

var data= '${listStore}';
    data= JSON.parse(data);

这里我们又将 json 字符串转换成了 json 对象

*  3、我们就可以在 js 中使用它了，例如：

for(var i = 0,len = data.length;i < len;i++){
    	str += '<option value="'+data[i].id+'">'+data[i].name+'</option>';
    }

如您在阅读中发现不足，欢迎留言！！！

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 van-uplaoder保存文件到后端，回显后端接口返回的数据

实现功能：在移动端使用van-uploader组件上传图片，然后调用接口保存到后端数据库，提交保存信息成功后，调用另外的接口返回数据用来回显uploaded的文件，（一般正常的

「爱情、让人受尽委屈。」/ 2024年03月30日 10:07/ 0 赞/ 81 阅读

相关 form表单提交数据，处理后端返回数据

引入在线 jquery-form.js <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form

太过爱你忘了你带给我的痛/ 2023年07月24日 05:40/ 0 赞/ 28 阅读

相关 JavaScript中操作后端用ModelAndView返回的List数据

> 在 JavaWeb 项目中，我们经常使用 ModelAndView 装入请求页面的地址和传入页面的数据，我们在 HTML 中可以用 JSTL 来操作装入在 ModelAnd

忘是亡心i/ 2023年06月23日 11:57/ 0 赞/ 6 阅读

相关转换后端返回的格式

后端返回格式： const arr = [ { '门禁1':1 }, {

清疚/ 2022年12月28日 07:41/ 0 赞/ 231 阅读

相关当返回前端的数据中存在List对象集合，如何优雅操作？

文章目录 1.业务背景 2.实体类 3.自定义Mapper和xml文件 4.Service层 5.Controller层 --------

爱被打了一巴掌/ 2022年10月09日 03:27/ 0 赞/ 169 阅读

相关 SpringMVC 返回ModelAndView对象

SpringMVC 返回ModelAndView对象在控制器类中，处理客户端请求后，可以把需要响应到页面的数据和视图名字都封装到一个ModelAndView对象中，然

ゞ浴缸里的玫瑰/ 2022年06月05日 02:15/ 0 赞/ 251 阅读

相关 SpringMVC后端返回数据到前端页面

以userAdd.jsp为例，它既是接收数据页面，也是发送数据页面 userAdd.jsp <%@ page language="java" import="ja

冷不防/ 2022年04月13日 10:52/ 0 赞/ 591 阅读

相关 SpringMVC笔记：后端向前端返回数据的方式

1、通过request对象返回数据：后台： @RequestMapping("/test1") public String test(Http

╰+攻爆jí腚メ/ 2022年03月16日 09:52/ 0 赞/ 1592 阅读

相关修改后端返回数据中的键名

这个问题是我在用Vue的ElementUI中做项目（级联选择器）时遇到的。假如我们想要得到如下结构的返回数据： options: [ {value:

￡神魔★判官ぃ/ 2022年02月25日 09:14/ 0 赞/ 283 阅读

相关 java常见返回，后端返回

package com.mryt.spell.user.center.domain; import java.io.Serializable;

深碍√TFBOYSˉ_/ 2022年01月16日 00:31/ 0 赞/ 351 阅读