一、问题描述

用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. vim编辑时遇到E325: ATTENTION Found a swap file by the name "./.backu.sh.swp"错误代码的解决办法

    vim编辑时遇到E325: ATTENTION Found a swap file by the name "./.backu.sh.swp"错误代码的解决办法 重点:解决方法是: ...

  2. Windows Automation API 3.0 Overview

    https://www.codemag.com/article/0810042 While general accessibility requirements (such as font color ...

  3. NSFileHandle类和NSFileManager,追加数据的操作

    NSFileHandle类主要对文件内容进行读取和写入操作 NSFileManager类主要对文件的操作(删除.修改.移动.复制等等) 常用处理方法 + (id)fileHandleForReadin ...

  4. Euclid`s Game

    题目 给定两个整数 a 和 b,Stan和Ollie轮流从较大的数字中减去较小的数的倍数.这里的倍数是指1倍.2倍这样的整数倍,并且相减后的结果不能小于0.Stan先手,在自己的回合将其中一个数变成零 ...

  5. Easy-Mock模拟get接口和post接口实例

    1.先创建项目,再新建接口 创建项目入口:首页右下角 + 按钮 创建接口入口如下图: 关于mock的语法这里不做说明,可查看mock.js官方查看更详情的资料. 小tip:在Easy-Mock里面支持 ...

  6. Mysql 索引详细解释

    MySQL索引详解(优缺点,何时需要/不需要创建索引,索引及sql语句的优化)  一.什么是索引? 索引是对数据库表中的一列或多列值进行排序的一种结构,使用索引可以快速访问数据库表中的特定信息. 二. ...

  7. vim文本编辑器——替换、保存退出

    1.替换: (1)全文替换: 利用查询命令查询: (2)指定替换的字符串的范围: 2.保存.退出命令: (1)在命令行模式下保存(:w) (2)另存为(:w+要保存的文件的路径) (3)保存退出(:w ...

  8. EF core 性能调优

    Entity Framework Core performance tuning – a worked example Last Updated: February 25, 2019 | Create ...

  9. Mac 无法安装安装psutil 报错 error: command '/usr/bin/clang' failed with exit status 1

    psutil是一个特别好用来检查系统资源的一个包, 但是 在Mac安装却总是报错 查看监控系统脚本, 点这里 mac系统版本: Macos Mojave 10.14.3 报错信息如下: WARNING ...

  10. 洛谷p2370yyy2015c01的U盘题解

    没什么特殊的想法 就是看自己很久没有更新关于题解类的文章了而已 (其实这是我好久之前做的, 只是把它从洛谷博客搬到了这里而已) 题目 首先分析题目要二分 他长成这个亚子太二分了 所以就要二分 最好是先 ...