一、问题描述

用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. send fd 无法传

    string success = "1"; string urlstr = "http://localhost:8080/getfilecontent?filename= ...

  2. js动画--缓冲动画

    前面讲述的动画速度都是匀速的,现实生活中的运动速度的变化不一定是恒定的,存在一定的缓冲,就像火车进站一样,速度会越来越慢. 对于改变速度措施,其实只要将动画第一课的程序稍微的改变一下就可以了,我们来看 ...

  3. the_permalink()和get_permalink()的区别

    wordpress中the_permalink()是用于posts loop循环中(判断是否有文章,如果有文章则展示出来:如果没有文章就显示没有文章),常用于文章分类列表和文章页的模板中,用法如下 & ...

  4. iis7设置http跳转https实测可用

    前面ytkah和大家聊了Apache设置http如何301到https,现在我们说说iis7设置http跳转https,因为还是有很多人在用iis服务器.首先要先安装url rewrite modul ...

  5. vector Construct

    #include<vector> #include<iostream> using namespace std; void Test(); void main() { ,,,, ...

  6. JSE,JEE,JME三者之间有什么区别

    JAVA是一种面向对象语言由SUN公司出品 J针对不同的使用方向规划出J2SE,J2EE,J2ME三个版本 J2SE 指标准版一般用于用户学习JAVA语言的基础也是使用其他两个版本的基础主要用于编写C ...

  7. POJ3259-Wormholes-( spfa || Bellman_Ford )

    题意:有n块田,之间有m条无向边表示路径,权值表示走过需要花费的时间.有w对虫洞,虫洞是单向的,表示穿越一定时间到过去,并且回到虫洞指向的点,问一个人有没有可能通过虫洞回到某个起点,并且在从这个起点出 ...

  8. [GXOI/GZOI2019]旅行者 （最短路）

    题意 给定一个有向图,其中一些顶点为关键点.求这些关键点两两之间最小距离. 题解 考试时没怎么想写了50分暴力走了.以为是什么强连通分量的解法,结果就是个最短路.直接从关键点跑一次最短路dis[0], ...

  9. Vsftpd 2.2.x安装和配置--centos7前的版本

    Vsftpd 2.2.x安装和配置--centos7前的版本 原文链接:https://my.oschina.net/loubobooo/blog/1633367 1. 关闭防火墙和Selinux L ...

  10. cc2530的I/O中断

    通用I/O的中断 cc2530的CPU有18个中断源,每个中断都可以分别使能和控制. 18个中断源的优先级 18个中断源分为6个组,每一组有3个中断源,中断优先级可以通过配置相应寄存器来实现 中断源的 ...