通过ExpressJS向JavaScript传递变量

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