从 Javascript/JQuery 动态访问 Java 模型列表

Question

我有一个模型为List<Collaborateur>，从我的控制器动作到我的 JSP。我在 JQuery/Javascript 中有以下功能：

function showCollaborateurEmail(index) {
  alert("${collaborateurs[1].email}"); // Works
  alert("${collaborateurs[2].email}"); // Works
  //....
  alert("${collaborateurs[index].email}"); // Not working
}

所以我想通过调用函数showCollaborateurEmail(index)动态显示我的Collaborateur模型的电子邮件。

感谢您的帮助！

Answer 1

您面临的问题是服务器端代码和客户端代码之间的数据交换。有多种方法可以实现您的目标。你可以...

1. 将列表元素存储在隐藏的表单域中（转义分隔符可能是一个挑战）或
2. 生成 javascript - JSP 中服务器端的代码，用于创建带有列表元素的 javascript 数组或
3. 使用 ajax。

1 和 2 是相当临时的 - 解决一个小问题。 3 是一个更大的解决方案（取决于您的技术环境），它还提供了避免页面重新加载的可能性。

Answer 2

两种探索方法： 1）用列表的所有元素生成一个javascript数组，并在客户端随意访问（javascript） 2) 通过 ajax 请求访问“合作者”

Answer 3

我不建议通过 jsp 混合这样的服务器和客户端代码。 相反，您应该创建一个 servlet 并使用 ajax 调用您需要的内容。

如果您想使用肮脏/快速的技巧，我认为您可以在 <script> 标记内将数组从服务器端构建到客户端

例如：

<script> 
var emailArray = [
    <%for (int i = 0; i > collaborateurs.length; i++){ %>
    "<%=collaborateurs[i].email %>"
    <%
        if(i < collaborateurs.length - 1){
            %>, <%
        }
    }%>
];
</script>

（我是手写的，所以我不确定语法是否正确，但我希望你明白）

Answer 4

您将拥有的另一个选项是将 List 对象转换为 json，然后在编译阶段将其设置为 jsp 中的变量，客户端解析 json 并创建一个对象并对其进行迭代。这样即使在加载页面后您也可以访问您的列表。

您可以使用 gson、Jackson 等 API。

示例：-

List<Object> list1=new ArrayList<>();
// Add values to list here
JSONArray obj=new JSONArray(list1);

在JSP：

var collaborateursList=${collaborateurs};

function showCollaborateurEmail(index) {
  alert(collaborateursList[1].email);
  alert(collaborateursList[2].email); 
  alert("collaborateursList[index].email);
}

Answer 5

请验证index 是否正确传递给函数并尝试使用它

alert("${collaborateurs[" + index + "].email}");