如何将EJS中的对象数组传递至Express？附AJAX改造方法

原代码的核心问题 #

1. EJS模板无法访问客户端JS变量：你在EJS的<a>标签里用<%= arrs %>，但arrs是客户端脚本里定义的变量，EJS是服务端渲染模板，运行时根本识别不到这个客户端变量，所以会抛出arrs is not defined错误。
2. 请求方式与参数处理错误：用GET请求的URL参数传递数组数据既不规范也容易触发长度限制，而且原服务端代码用req.body获取参数，但GET请求不存在请求体，逻辑完全错误。
3. 客户端JS语法错误：const arrs[];是非法声明，正确写法应为const arrs = [];。
4. 批量插入逻辑缺失：原服务端代码只处理单个学生数据，但你要传递的是数组，需要实现批量插入逻辑提升效率。

改造后的完整代码 #

1. 客户端（index.ejs）代码修改 #

<button onclick="getTableValue()">Get Table Value</button>
<button class="btn btn-danger btn-sm" onclick="saveData()">Save</button>

<script>
// 修正变量声明语法
const arrs = []; 

function getTableValue() {
  const table = document.getElementById("display_excel_data");
  const totalRows = table.rows.length;
  // 每次获取数据前清空数组，避免重复添加
  arrs.length = 0;
  for (let x = 1; x < totalRows; x++) {
    const arr = {};
    arr.studentID = table.rows[x].cells[0].innerHTML;
    arr.studentName = table.rows[x].cells[1].innerHTML;
    arrs.push(arr);
  }
  console.log("获取到的表格数据：", arrs);
}

function saveData() {
  if (arrs.length === 0) {
    alert("请先点击获取表格数据！");
    return;
  }
  // 用原生AJAX（fetch）发送POST请求
  fetch("/assessResult", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(arrs),
  })
  .then(response => {
    if (response.ok) {
      alert("保存成功！");
      window.location.href = "/listcourse";
    } else {
      throw new Error("保存失败");
    }
  })
  .catch(error => {
    console.error("错误：", error);
    alert("保存出现错误，请重试");
  });
}
</script>

2. 服务端（app.js）代码修改 #

首先确保配置JSON解析中间件（Express 4.16+自带）：

// 在路由注册前添加
app.use(express.json());

然后修改路由为POST，实现批量插入：

app.post('/assessResult', function(req, res){
  const students = req.body;
  if (!Array.isArray(students) || students.length === 0) {
    return res.status(400).send("没有可保存的数据");
  }
  // 构造MySQL批量插入的SQL语句
  const sql = 'INSERT INTO Student (studentID, studentName) VALUES ?';
  // 转换数据格式为MySQL批量插入要求的二维数组
  const values = students.map(student => [student.studentID, student.studentName]);
  
  con.query(sql, [values], function(err, result){
    if(err) {
      console.error("插入错误：", err);
      return res.status(500).send("插入数据失败");
    }
    res.sendStatus(200);
  });
});

关键说明 #

• POST请求传递数组：数组数据适合放在请求体中传递，避免URL长度限制和数据泄露风险。
• JSON格式传输：客户端将数组转为JSON字符串，服务端通过express.json()中间件自动解析为JS对象。
• 批量插入优化：相比循环插入单条数据，批量插入能大幅减少数据库交互次数，提升操作效率。
• 错误边界处理：添加了客户端空数据校验、服务端参数校验和错误捕获，避免程序崩溃。

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