基于URL参数查询数据时如何不使用fetch将后端JSON传递给EJS前端脚本

需求背景 #

要实现一个Express模板，支持根据URL参数展示对应帖子，路径逻辑参考Stack Overflow，将Stack Overflow路径里的questions替换为topic：

• Stack Overflow示例路径：https://stackoverflow.com/questions/111111/
• 自定义实现路径示例：localhost:8003/act/random/111111/

后端实现逻辑 #

authController.act方法会从MySQL请求并返回帖子数据，路由配置代码如下：

router.get('/act/:topic/:id/:title?', authController.isLoggedIn, (req, res, next) => {
  const promise = authController.act(req.params.topic, req.params.id);
  promise.then((results) => {
    res.render('act', {
      message1: 'some message', results: results
    });
  });
});

遇到的问题 #

尝试在HTML/EJS文件中直接将后端返回的results传给前端JS方法调用，写法如下：

<body onload="init();loadAct(results)">

已经确认results成功传递到了EJS文件，使用<%- results %>可以正常渲染内容，但前端JS执行时抛出如下错误：

Uncaught ReferenceError: results is not defined
    onload http://localhost:8003/act/random/127/:1

解决方案 #

方案一（已验证可运行） #

通过序列化+反序列化的方式传递EJS变量给前端JS，写法如下：

<body onload="init();loadAct(JSON.parse('<%= JSON.stringify(results) %>'));" >

方案二 #

如果上述方案不符合你的场景，可使用Quentin提出的第二种解决方案。

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