JavaScript中操作后端用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>';
}