ExpressJS是一种流行的Node.js框架，它提供了简单而强大的路由和中间件功能。在构建Web应用程序时，将数据从服务器传递到客户端的JavaScript是一个常见的需求。在这篇文章中，我们将学习如何使用ExpressJS将变量传递给客户端的JavaScript。
在模板引擎中传递变量
ExpressJS支持多种模板引擎，如Handlebars、EJS和Pug等。在这些模板引擎中，我们可以轻松地将变量传递给客户端的JavaScript。
以下是一个使用Handlebars模板引擎的示例：
-- -------------------- ---- ------- -- ------------ ----- ------ - ----------------------------- -- ------------------- ------------------------ --------- ------------- -------- ------------- -- --------------------- -------------------- ----- ---- -- - ----- ---- - - --- -------------- ----- ----- ---- - ------------------ - ---- -- -- -- ----------------- -------- -- ------------------------ ----- ---- - ---------------- ------- ----------------- ---------
在上面的代码中，我们首先设置Handlebars为默认模板引擎。然后，在路由处理函数中，我们创建了一个user对象，并将其传递给Handlebars模板。在模板中，我们使用三个花括号来输出user对象的JSON字符串表示形式，并在客户端的JavaScript中使用它。
这种方法适用于大多数情况，但有时我们需要更高级的选项。
使用AJAX从服务器获取数据
如果我们需要动态地从服务器获取数据，那么可以使用AJAX请求。ExpressJS提供了内置的路由处理程序来处理AJAX请求。
以下是一个使用jQuery的示例：
-- -------------------- ---- -------
-- ------
------------------------ ----- ---- -- -
----- ---- - - --- -------------- ----- ----- ---- -
--------------
--
-- --------------
-------------------- -- -
--------------------- ------ -- -
-----------------
--
--在上面的代码中，我们首先定义了一个路由处理程序来返回一个用户对象的JSON表示形式。然后，在客户端的JavaScript中，我们使用jQuery的$.get()方法向服务器发送AJAX请求并获取数据。在回调函数中，我们打印出了返回的数据。
将变量包含在HTML中
最后，如果我们只需要在HTML中包含一些简单的变量，我们可以将它们直接包含在HTML中。ExpressJS提供了内置的路由处理程序来提供静态文件。
以下是一个示例：
-- -------------------- ---- ------- ---- ------------ --- --------- ----- ------ ------ --------- --------------- ------- ------ ----------- -- -- ------------- ------- --- --- -- ------ ------- ------- ---- ------ --- --------------------------------- -- ------------------- --------- ----- ------ ------ --------- --------------- ------- ------ ----------- -- -- ------------- ------- --- --- -- ------ ------- ------------------------- ------- ------- -- ------------------ ----- -- - --- ----------------
在上面的代码中，我们将变量直接包含在HTML中，并使用<%= %>语法来输出它们。然后，在客户端的JavaScript中，我们定义了一个id变量，并将其打印到控制台中。
结论
在这篇文章中，我们学习了如何使用ExpressJS
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28091