一、问题描述

用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. Java 并发，相关术语

    Java 并发,相关术语: 术语 作用 synchronize 可修饰方法.代码块.类:介绍:https://www.cnblogs.com/zyxiaohuihui/p/9096882.html L ...

  2. http 和 https（通俗原理了解）

    超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂 ...

  3. woocommerce调用产品相册gallery图片如何操作?wordpress技巧

    wordpress官网有很多woocommerce模板,但有些客户要求定制模板,这时可能会碰到产品相册图片调用的问题,如果根据自带的Storefront主题来改很麻烦,那我们就自己定义吧!下来就随yt ...

  4. MySQL - binlog日志简介及设置

    基本概念 binlog是Mysql sever层维护的一种二进制日志,与innodb引擎中的redo/undo log是完全不同的日志:其主要是用来记录对mysql数据更新或潜在发生更新的SQL语句, ...

  5. UI系统的三个主要关系

    1.UI的结构.组织和组件.布局.渲染效率:(系统内置的组件有哪些?) 2.UI与事件的关系: 3.UI与数据的关系:

  6. SpringBoot 之Spring Boot Starter依赖包及作用（自己还没有看）

    spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和YAML. spring-boot-starter-amqp 通过spring-rabbit来支持 ...

  7. PHP：网展cms后台任意文件删除和sql注入

    0x01:目录结构 可以发现Frameword是框架的文件 install安装 public公共文件 uploads储存上传之类的文件 webuser后台文件 Home前台文件 0x02.csrf漏洞 ...

  8. 对ABBYY FineReader功能的探究

    ABBYY FineReader,一个强大的PDF阅读器和OCR识别器! 阅读主界面 OCR主界面 资源就不贴了,不过提示一下大家:Google Search 懒 得 勤 快,就可以找到. 经过研究, ...

  9. MongoDB 部署复制集（副本集）

    部署MongoDB复制集(副本集)   环境 操作系统:Ubuntu 18.04 MongoDB: 4.0.3 服务器 首先部署3台服务器,1台主节点 + 2台从节点 3台服务器的内容ip分别是: 1 ...

  10. nginx 反向代理之 proxy_set_header

    proxy_set_header用来设定被代理服务器接收到的header信息. 语法:proxy_set_header field value; field :为要更改的项目,也可以理解为变量的名字, ...