一、问题描述

用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. html中定位详解

    首先,我们来讨论一下html中共有几种定位方式:静态定位(static),相对定位(relative),绝对定位(absolute,fixed).其中fixed又叫固定定位,它是属于绝对定位的一种,但 ...

  2. 201671030123叶虹 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十四 团队项目评审&课程学习总结 课程学习目标 掌握软件项目评审会流程:反思总结课程学习内容 一.实验一问题回答 1.实验 ...

  3. fastjson =< 1.2.47 反序列化漏洞复现

    fastjson =< 1.2.47 反序列化漏洞复现 HW期间爆出来一个在hw期间使用的fastjson 漏洞,该漏洞无需开启autoType即可利用成功,建议使用fastjson的用户尽快升 ...

  4. Discuz通过修改文章标题更好的实现SEO的方法

    找到: /source/module/forum/forum_viewthread.php 代码如下: $navtitle = get_title_page($_G['forum_thread'][' ...

  5. .net 异常

    ArgumentNullException 当将空引用(在 Visual Basic 中为 Nothing)传递给不接受它作为有效参数的方法时引发的异常.

  6. linux系统时区问题

    1. centos 7 转载自:https://www.cnblogs.com/zhangeamon/p/5500744.html 查看时区: timedatectl $timedatectl sta ...

  7. Eclipse 常用快捷键——IDEA 常用快捷键

    Eclipse 常用快捷键 熟练 单选注释 ctrl + / 多行注释 ctrl + shift + / 向下复制一行 (Duplicate Lines) ctrl+alt+down 删除一行或选中行 ...

  8. SpringBoot 的一些学习资源

    很多Java Web开发者目前常用的技术还是SpringBoot,想要工作效率更,在刚入门不久时有必要全面了解一下它的功能特性,而高效学习的方法,除了在官网学习外,还可以看下网上已有的不错的教程.刚看 ...

  9. Js更改整页a标签跳转方式

    <script> var anchors = document.getElementsByTagName("a"); for(i=0;i<anchors.leng ...

  10. Sublime Text 3关闭自动升级提醒

    由于种种原因,导致不想升级现有版本的ST3,但是被它的升级提醒弹窗严重骚扰! ||||||||||| 解 决 办 法 ||||||||||| 1.首选项 - 设置 - 用户(快捷键 ❀,)打开“Pre ...