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

如您在閱讀中發現不足，歡迎留言！！！