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