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

在 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>';
}

如您在阅读中发现不足,欢迎留言!!!

发布了63 篇原创文章 · 获赞 66 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_40065776/article/details/103604487