如何在 app.js 文件中包含 EJS 文件？

Question

我有一个 index.ejs 文件，我在其中使用了脚本标签并编写了一些用于 dom 操作的 javascript。现在我想将此文件中的变量用于我的 app.js 文件。如何做到这一点？ 为了引用 ejs 文件的变量，我们这样做：

{someVariable:value}

我只是想反之亦然，即访问在 ejs 文件的脚本标签中声明的变量到 app.js 文件。

//index.ejs

<script>
    window.onload=function(){var c = document.getElementById("city_search").options[1].value;
        console.log(c);
     };
        function changeCarousel(){
        var x = document.getElementById("city_search").value;
        console.log(x);
     }
</script>

我如何访问 app.js 中的变量 x，因为它没有在那里声明。

Answer 1

我如何访问 app.js 中的变量 x，因为它没有在那里声明。

你没有。不是直接的。变量x 位于客户端计算机上运行的浏览器中，对您的服务器或服务器计算机不直接可用或可见。

当您在浏览器中运行的网页中的 Javascript 中有一个变量时，将其发送到您的服务器的唯一方法是对您的服务器进行 Ajax 调用或将该值嵌入 URL 并请求在 URL 中具有该值的新页面（作为路径或查询参数的一部分）。

为了进一步了解，让我们回顾一下 EJS 文件是如何在您的 node.js 服务器上工作的。

1. 浏览器请求页面（由您的 EJS 文件表示）。
2. 您的服务器收到对该页面的请求。
3. 服务器收集该页面的所有相关数据，将该数据放入一个对象中，然后呈现 EJS 页面。这将扩展 EJS 页面并将任何所需的数据合并到页面中。
4. 呈现的 EJS 页面作为对原始 HTTP 请求的响应发送到浏览器。
5. 浏览器接收到现在的 HTML 页面（渲染的 EJS 页面），解析它并显示它。
6. 浏览器解析并运行页面中的任何脚本标签。

在浏览器中运行脚本时，它们是与您的服务器完全分开的环境。它们在浏览器中的客户端计算机上运行，​​而不是服务器计算机。要与服务器共享来自网页的数据，您必须启动与服务器的一些通信并向服务器发送一些数据。有很多方法可以做到这一点。例如，您可以对服务器进行 Ajax 调用，将来自网页的数据发送给它，让服务器接收到该 Ajax 请求，然后发回响应。然后，您的客户端 Javascript 将返回该 Ajax 响应，然后可以对结果执行任何操作（将其插入网页、加载不同的页面、将其显示给用户等...）。

---

如果您更具体地告诉我们您要如何处理价值 x，那么我们可以就如何实现这一目标提出更详细的建议。