如何在EJS文件中访问关联JS文件内的变量？

你遇到的核心矛盾是EJS模板的执行上下文和客户端JS完全分离：

• EJS在Express服务器端完成渲染，此时浏览器还未加载searchProperties.js，模板里引用的propertyCount是客户端JS运行后才生成的变量，服务器渲染阶段根本不存在
• 你能成功注入searchQuery是因为它是服务器端提前准备好传给EJS的，而propertyCount是客户端API请求的结果，服务器渲染时还未生成这个值

根据你的业务场景，提供三种可行的解决方式：

方案1：服务器端请求API，渲染时直接传数据 #

把searchProperties.js里的API请求逻辑移到Express路由中，服务器拿到数据后，将propertyCount和房产数据一起传给EJS模板：

服务器端路由修改： #

// 假设浏览页路由为 /properties
app.get('/properties', async (req, res) => {
  const searchQuery = req.query.q; // 从跳转URL中获取搜索词
  try {
    // 调用房产API，替换为你实际的请求逻辑
    const response = await axios.get('你的房产API地址', {
      params: { query: searchQuery }
    });
    const properties = response.data;
    const propertyCount = properties.length;
    
    // 将数据传入EJS模板
    res.render('浏览页模板名称', {
      searchQuery,
      propertyCount,
      properties
    });
  } catch (err) {
    console.error(err);
    // 异常时传入默认值
    res.render('浏览页模板名称', { searchQuery, propertyCount: 0, properties: [] });
  }
});

EJS模板修改： #

<table>
    <% for(let i=0; i < propertyCount; i++) { %>
       <tr>
         <td><%= properties[i].title %></td> <!-- 替换为实际房产字段 -->
         <td><%= i %></td>
       </tr>
    <% } %>
</table>

<script>
    const searchQuery = '<%=searchQuery%>'
</script>
<!-- 此时searchProperties.js仅负责地图渲染等客户端交互，无需再请求API -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/public/searchProperties.js"></script>

方案2：客户端JS动态生成表格 #

保留客户端API请求，EJS仅渲染空表格容器，等searchProperties.js拿到数据后，用JS动态生成表格内容：

EJS模板修改： #

<!-- 渲染空表格容器 -->
<table id="propertiesTable">
</table>

<script>
    const searchQuery = '<%=searchQuery%>'
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/public/searchProperties.js"></script>

searchProperties.js修改： #

async function loadProperties() {
  const response = await axios.get('你的房产API地址', {
    params: { query: searchQuery }
  });
  const properties = response.data;
  const propertyCount = properties.length;
  
  // 获取表格元素
  const table = document.getElementById('propertiesTable');
  // 动态生成表格行
  for(let i=0; i < propertyCount; i++) {
    const row = document.createElement('tr');
    const cell1 = document.createElement('td');
    cell1.textContent = properties[i].title; // 替换为实际字段
    const cell2 = document.createElement('td');
    cell2.textContent = i;
    row.appendChild(cell1);
    row.appendChild(cell2);
    table.appendChild(row);
  }
}

// 页面加载完成后执行
window.addEventListener('load', loadProperties);

方案3：将客户端变量暴露到全局，EJS用客户端JS渲染 #

如果一定要保留EJS里的循环结构，可以先让EJS渲染模板字符串，客户端JS拿到数据后再替换变量：

EJS模板修改： #

<!-- 存储表格模板 -->
<script id="propertiesTableTemplate" type="text/template">
    <table>
        <% for(let i=0; i < {{propertyCount}}; i++) { %>
           <tr>
             <td>property</td>
             <td>{{i}}</td>
           </tr>
        <% } %>
    </table>
</script>

<!-- 表格渲染容器 -->
<div id="tableContainer"></div>

<script>
    const searchQuery = '<%=searchQuery%>'
</script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/public/searchProperties.js"></script>

searchProperties.js修改： #

async function loadProperties() {
  const response = await axios.get('你的房产API地址', {
    params: { query: searchQuery }
  });
  const properties = response.data;
  const propertyCount = properties.length;
  
  // 获取模板内容并替换变量
  let template = document.getElementById('propertiesTableTemplate').innerHTML;
  template = template.replace('{{propertyCount}}', propertyCount);
  
  // 生成所有行的HTML
  let rowsHtml = '';
  for(let i=0; i < propertyCount; i++) {
    rowsHtml += template.match(/<tr>.*?<\/tr>/)[0].replace('{{i}}', i);
  }
  
  // 插入到容器中
  document.getElementById('tableContainer').innerHTML = `<table>${rowsHtml}</table>`;
}

window.addEventListener('load', loadProperties);

优先选择方案1，服务器端请求API可避免跨域问题，同时对SEO更友好；如果必须在客户端请求API，方案2的实现更简洁易维护。

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