如何将script标签内Ajax获取的数据传递给EJS模板标签

你实现失败的本质是混淆了EJS和客户端JS的运行时序：

• EJS是服务端模板引擎，所有<% %>包裹的代码都会在服务器响应请求、生成HTML页面时就执行完毕，最终发送到浏览器的HTML文件里已经没有任何EJS标签
• 写在<script>里的JS是浏览器接收到HTML之后才会在客户端运行的代码，此时EJS的执行流程早就结束了，不可能反过来拿到客户端JS的变量

方案1：服务端提前获取数据，直接传给EJS渲染（推荐） #

如果这个Ajax接口是你自有服务提供的，直接在渲染EJS的路由逻辑里调用对应接口拿数据，然后传给EJS模板即可，无需在客户端发Ajax。
Express服务端参考代码：

// 服务端路由代码
app.get('/your-page', async (req, res) => {
  // 在这里提前调用你原本要在前端请求的接口获取数据
  const ajax_get_api_data = await fetch('你的接口地址').then(res => res.json())
  // 把数据传递给EJS模板
  res.render('你的ejs模板文件名', { dataArray: ajax_get_api_data })
})

EJS模板内直接使用传递的变量即可：

<% dataArray.map((data) => {%>
<div><%=data%></div>
<%}) %>

方案2：客户端发Ajax拿数据后，用JS动态渲染DOM #

如果你确实需要在客户端发起请求拿数据，就放弃用EJS做这部分渲染，直接用原生JS操作DOM生成内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>  
    <!-- 新增渲染内容的容器 -->
    <div id="data-container"></div>
    <script>
        // 你的Ajax请求逻辑，拿到数据后直接渲染到页面
        var ajax_get_api_data = [1,2,3]
        const container = document.getElementById('data-container')
        ajax_get_api_data.forEach(data => {
            const div = document.createElement('div')
            div.textContent = data
            container.appendChild(div)
        })
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者백광일