一、问题描述

用express搭了一个nodejs服务端，为了测试接口数据是否能够正常输出，用ejs作为模版引擎的html文件写js发请求。

1、请求正常，能在network看到，但是没有输出console的结果；

2、ejs不能读取异步js变量。

在服务端，html文件，如何将从接口fetch的数据渲染在ejs模版？

服务端A的html的js的ajax请求服务端A。

二、还原现场

下面介绍两种写法，title都可以拿到，但是在html请求的接口的数据无法正常传递给模版，导致页面无法渲染。

1、手动引入ejs

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <script src="ejs.min.js"></script>

    <script type="text/template" id="J_tpl">

      <% for(const i = 0; i < data.length; i++) { %>

        <details>

          <summary><%=data[i].names[0]%></summary>

          <p>手机号：<%=data[i].phone%></p>

          <p>性别：<%=data[i].sex%></p>

          <p>部门：<%=data[i].department%></p>

        </details>

      <% } %>

    </script>

    <script type="text/javascript">

      // 浏览器端，向服务端发请求。

      fetch("/api/person/queryPerson", {

        method: "POST",

        headers: {

          "Content-Type": "application/json"

        }

      })

        .then(function(response) {

          console.log(response, "响应");

          return response.json();

        })

        .then(function(jsonData) {

          // 1、没有打印console

          console.log(jsonData, "返回数据");

          const tpl = $("#J_tpl").html();

          // 2、data在ejs读取不到

          const html = ejs.render(tpl,{data: jsonData.data});

          $("#J_dom").html(html);

        })

        .catch(function() {

          console.log("出错了");

        });

    </script>

  </head>

  <body>

    <h1>人员列表</h1>

    <div id="J_dom"></div>

  </body>

</html>

2、假设ejs能够读取js异步变量

<!DOCTYPE html>

<html>

  <head>

    <title><%= title %></title>

    <script type="text/javascript">

      let globalData = [];

      // 浏览器端，向服务端发请求。

      fetch("/api/person/queryPerson", {

        method: "POST",

        headers: {

          "Content-Type": "application/json"

        }

      })

        .then(function(response) {

          console.log(response, "响应");

          return response.json();

        })

        .then(function(jsonData) {

          // 1、没有打印console

          console.log(jsonData, "返回数据");

          // 2、data在ejs读取不到

          globalData = jsonData.data;

        })

        .catch(function() {

          console.log("出错了");

        });

    </script>

  </head>

  <body>

    <h1>人员列表</h1>

    <div id="J_dom">

        <% for(const i = 0; i < globalData.length; i++) { %>

          <details>

            <summary><%=globalData[i].names[0]%></summary>

            <p>手机号：<%=globalData[i].phone%></p>

            <p>性别：<%=globalData[i].sex%></p>

            <p>部门：<%=globalData[i].department%></p>

          </details>

        <% } %>

    </div>

  </body>

</html>

三、问题分析

1、在服务端，无法将js变量传给ejs变量。（待论证）

EJS模板将在服务器上呈现Javscript开始执行（它将在浏览器上启动），因此无法返回到服务器并要求已经发送到浏览器的页面上的某些先前更改。

四、解决方案

ejs不能读取js变量？？？？？？的更多相关文章

  1. javascirpt对象运用与JS变量

    abcdefghijklmnopqrstuvwyz String 对象方法 charAt() 方法可返回指定位置的字符.stringObject.charAt(index)(index从0开始)[ht ...

  2. js变量以及其作用域详解

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp73   一.变量的类型  Javascript和Java.C这些语言不同 ...

  3. js变量以及其作用域

    一.变量的类型  Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: ...

  4. js字符串转换为数字的三种方法。（转换函数）（强制类型转换）（利用js变量弱类型转换）

    js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...

  5. js变量及其作用域（附例子及讲解）

    Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量   工具/原料   Ch ...

  6. [CentOS] 解决 crontab 无法读取环境变量的问题

    参考资料:http://blog.slogra.com/post-238.html 1. 问题描述 一段数据处理的 shell 程序,在 shell 中手动运行,可以正确执行.但是,把它放在 cron ...

  7. js变量及其作用域

    Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量   一.js变量的类型及 ...

  8. JS变量和函数的一些理解

    今日看了下JS变量的一些文章,有些感触,把自己总结的一些写出来. JS初始化的过程1.JS解释器执行代码之前,创建全局变量2.用预定义的值和函数来初始化全局对象中的属性,3.搜索函数外的var声明,创 ...

  9. js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

    标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...

随机推荐

  1. MANIFEST.MF文件对Import-Package/Export-Package重排列

    众所周知,MANIFEST.MF文件中的空格开头的行是相当于拼接在上一行末尾的.很多又长又乱的Import-Package或者Export-Package,有时候想要搜索某个package却可能被换行 ...

  2. 不用图片做的三角语言框效果，纯样式编写，css三角样式写法

      2010-07-05 19:57:28 博主 回复 用户昵称 在秋日真的有轻柔吧. 上边效果与理想的有误差,代码布不上去,下边是源代码,另行保存后查看真正效果,下图是真正效果,区别在三角处,里面颜 ...

  3. [教程]Ubuntu16.04安装TeX Live

    [教程]Ubuntu16.04安装TeX Live step 1 戳这里下载镜像 (只需要下载texlive.iso) 在终端输入 sudo apt-get install perl-tk step ...

  4. MongoDB 实现多key group by 并实现 having

    1.group by多个key db.testcol.aggregate(    {"$group": {_id:{card:"$card",account:& ...

  5. 大文件上传控件webupload插件

    之前仿造uploadify写了一个HTML5版的文件上传插件,没看过的朋友可以点此先看一下~得到了不少朋友的好评,我自己也用在了项目中,不论是用户头像上传,还是各种媒体文件的上传,以及各种个性的业务需 ...

  6. JS变量提升和作用域

    一.JS变量提升 1.当浏览器引擎解析js代码时,将js中的所有一开始就是var声明的和function声明的都提升到全局.此时又叫全局作用域 console.log(aa); console.log ...

  7. Problem 1 珠江夜游 (cruise .cpp)———2019.10.6

    Problem 1 珠江夜游 (cruise.cpp)[题目描述]小 Z 放假后难得来一趟广州游玩,当然要吃遍广州各路美食小吃然后再到珠江新城看看远近闻名的小蛮腰啦!可当小 Z 一路吃吃吃以后,天渐渐 ...

  8. 【JZOJ6213】【20190613】String

    题目 \(n \le 10^{18} \ , \ |T| \le 10^5\) 题解 显然,最少的操作次数一定是贪心地能匹配就匹配 我们可以建出\(T\)的SAM,把SAM不能走的边补到根的后继节点 ...

  9. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  10. 关于wineQQ8.9.19983deepin23版本提升不能在使用请升级，Linux偷懒升级方法

    安装wineQQ8.9.19983deepin23版本后提示,不在提供服务请升级. 第一步 前往QQ官方下载Windows最先版本QQ https://qd.myapp.com/myapp/qqtea ...