for-loop 不适用于 Spring MVC 中的模型列表答案

【问题标题】：for-loop does not work for a model list in Spring MVCfor-loop 不适用于 Spring MVC 中的模型列表
【发布时间】：2014-11-23 11:23:42
【问题描述】：

我正在使用 Spring MVC 开发应用程序。在我的表单中，我希望在用户插入邮政编码时自动填写城市名称字段。因此，我将 .csv 文件解析为对象 ZipCity（对于每个邮政编码一个对象），并使用这些对象创建数组列表 zipCityListCh。我尝试使用 JavaScript 遍历 .jsp 页面上的列表（以匹配邮政编码），但迭代不起作用。

<script type="text/javascript">
  var zip = document.getElementById("field-zipCode");
  zip.addEventListener("blur", zipToCity, false);

  function zipToCity() {
    var field = document.getElementById("field-city");
	
    for (var i = 0; i < 5; i++) {
      if ("${zipCityAsArray[i].zip==zip.value}") {
        field.value = "${zipCityAsArray[i].city}";
      }
    }

    return true;
  }
</script>

不过，如果我插入一个数字而不是变量 i，它确实有效：

<script type="text/javascript">
  var zip = document.getElementById("field-zipCode");
  zip.addEventListener("blur", zipToCity, false);

  function zipToCity() {
    var field = document.getElementById("field-city");
	
    for (var i = 0; i < 5; i++) {
      if ("${zipCityAsArray[1].zip==zip.value}") {
        field.value = "${zipCityAsArray[1].city}";
      }
    }

    return true;
  }
</script>

似乎变量i 未被识别为数字。这是控制器代码：

private ZipCityList zipCityListCh = new ZipCityList("src/main/resources/files/plz.csv");
private ArrayList<ZipCity> zipCityAsArray = zipCityListCh.getZipCityAsArrayList();
	
@RequestMapping(value = "/createAd", method = RequestMethod.GET)
public ModelAndView createAd(){
  ModelAndView model = new ModelAndView("create-ad");  
  model.addObject("zipCityAsArray",zipCityAsArray );
  model.addObject("adForm", new AdForm());

  return model;
}

为什么第一个 sn-p 不起作用？

【问题讨论】：

您正在混合服务器和客户端评估。您的zipCityAsArray 在var i 在客户端可见之前绑定在控制器中。但是服务器端视图是评估绑定模型属性的地方 - 而且 i 不可见。

标签： java javascript jsp spring-mvc el

【解决方案1】：

就像 Dirk Lachowski 在他的评论中所说：由于 EL 是服务器端代码并且首先被编译成 Java 类，在它在服务器上运行之前，它的范围内没有定义变量 i。另一方面，JavaScript 在客户端运行，并且在 EL 已经被评估时运行得更晚。您可以检查页面源以查看浏览器加载页面后服务器返回的内容以及 JavaScript 运行其循环时可用的数据量。

如果您真的想使用 JavaScript 来使用服务器端变量的数据创建循环，那么您可以使用 JSTL 标记将其填充到 JavaScript 数据结构中，或者使用 AJAX 请求从服务器获取它。

【讨论】：

【解决方案2】：

感谢您的解释！然后我尝试了不同的方法，最终通过在 javascript 函数中嵌入 HTML forEach 来解决它......效果很好！

function zipToCity() {
		var field = document.getElementById("field-city");

		<c:forEach items="${zipCityAsArray}" var="item">
		var zipFromObj = parseInt("${item.zip}");

		var rooms = document.getElementById("field-nrOfRooms");
		rooms.value = zipFromObj;

		if (zipFromObj == zip.value) {
			field.value = "${item.city}";
		}
		</c:forEach>
        
        return true;

     }

【讨论】：