如何在同一JSP页面中将JavaScript数组赋值给Java ArrayList？

嘿，你这里踩了一个前后端新手常犯的运行时机混淆错误！直接在JSP的Java代码块里写javaList = javaScriptArray完全行不通，原因很关键：

• JSP里的<% ... %>代码是服务器端运行的，这时候浏览器还没拿到页面，更别说执行JavaScript代码了。
• 你的javaScriptArray是前端浏览器端的变量，服务器根本访问不到这个上下文里的内容。

下面给你两种可行的解决方案，根据你的场景选就行：

方案1：AJAX异步传递（推荐，无页面刷新） #

这种方式适合不需要刷新页面的交互场景，步骤清晰：

1. 前端把JS数组转成JSON并发送请求
   用你已经在用的jQuery写示例：

   var javaScriptArray = $('#sortable').sortable("toArray");
   // 把JS数组转成JSON字符串，方便后端解析
   var jsonData = JSON.stringify(javaScriptArray);
   
   $.ajax({
       url: "SortableServlet", // 替换成你的后端Servlet路径
       type: "POST",
       contentType: "application/json",
       data: jsonData,
       success: function(response) {
           console.log("数组已成功传到后端！");
           // 这里可以处理后端返回的结果，比如更新页面内容
       },
       error: function(xhr, status, error) {
           console.error("传递失败：" + error);
       }
   });
   

2. 后端Servlet接收并转成ArrayList
   用Gson（或者Jackson）来解析JSON，示例代码：

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // 读取请求体里的JSON数据
       BufferedReader reader = request.getReader();
       StringBuilder sb = new StringBuilder();
       String line;
       while ((line = reader.readLine()) != null) {
           sb.append(line);
       }
       String json = sb.toString();
   
       // 用Gson把JSON转成ArrayList<String>
       Gson gson = new Gson();
       ArrayList<String> javaList = gson.fromJson(json, new TypeToken<ArrayList<String>>(){}.getType());
   
       // 现在你可以用这个javaList做任何操作，比如存到request里转发回JSP
       request.setAttribute("javaList", javaList);
       // 如果需要给前端返回结果，转成JSON写回response
       response.setContentType("application/json");
       response.getWriter().write(gson.toJson("处理完成"));
   }
   

3. 在JSP中使用这个JavaList
   后端转发回JSP后，用EL表达式遍历即可：

   <%-- 先引入JSTL标签库 --%>
   <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
   
   <c:forEach items="${javaList}" var="item">
       <p>排序后的元素：${item}</p>
   </c:forEach>
   

方案2：表单提交（适合需要刷新页面的场景） #

如果你的业务需要通过表单提交完成，就把JS数组拆成多个隐藏字段：

1. 前端动态添加隐藏字段到表单

   var javaScriptArray = $('#sortable').sortable("toArray");
   var form = document.getElementById("sortForm");
   
   // 先清空旧的隐藏字段，避免重复提交
   $('input[name="sortableItems"]').remove();
   
   // 循环数组，给表单加隐藏字段
   javaScriptArray.forEach(function(item) {
       var input = document.createElement("input");
       input.type = "hidden";
       input.name = "sortableItems";
       input.value = item;
       form.appendChild(input);
   });
   
   // 提交表单
   form.submit();
   

2. 后端从Request中获取并转成ArrayList

   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // 获取所有同名的隐藏字段值，返回String数组
       String[] itemsArray = request.getParameterValues("sortableItems");
       // 转成ArrayList
       ArrayList<String> javaList = new ArrayList<>(Arrays.asList(itemsArray));
   
       // 存到request里，转发回JSP使用
       request.setAttribute("javaList", javaList);
       request.getRequestDispatcher("yourPage.jsp").forward(request, response);
   }
   

划重点：前后端是完全独立的运行环境，不能直接跨上下文访问变量，必须通过HTTP请求来传递数据！

内容的提问来源于stack exchange，提问作者NadjiThabet