将变量从ajax传递给jade/pug答案

【问题标题】：Pass variable from ajax to jade/pug将变量从ajax传递给jade/pug
【发布时间】：2020-04-16 10:43:02
【问题描述】：

我通过 ajax/fetch 从 nodejs 获取值，并且需要将其传递给 Pug。在这里的任何帮助将不胜感激

sample.pug
      button#searchVal Search
      script(type='text/javascript', src='/lib/onClick.js')
      br
      br
      table#table(div='')
        each row in slaJobs
         tr
          th#cbs-tab-header(div='') !{row.jobname}
          th#cbs-tab-header(div='') !{row.job_type}
          th#cbs-tab-header(div='') !{row.autosys_instance}

dummy.js

    .then(function(data) {
      console.log(data.jobsHeader)
      console.log(data.slaJobs)
       })

需要将js中data.slaJobs的值设置为Pug的slaJobs

【问题讨论】：

搜索了多个博客，但我找不到这个答案

标签： node.js ajax pug

【解决方案1】：

如果您有能力为结果刷新 pug 页面：

使用 ajax 向 node.js 中的某些路由发出请求。
在路由处理程序中 - 您可以在其中渲染 pug 视图 - 您可以将参数传递给您的视图模板。所以当 pug 页面将被渲染时 - 它已经包含您的数据。

如果您无法刷新： 1. 模板中的脚本标签。像任何其他 AJAX 一样处理响应并将数据注入 HTML 页面

【讨论】：

感谢您的回复，我能够通过下面的脚本将新数据获取到 js 变量并被困在这里......就像普通 HTML 一样，我无法传递数据......就像在 Pug 中使用变量来迭代值..所以我需要将值传递给 Pug 变量...不确定是否能够在 JS .then(function(data) { console.log(data.jobsHeader) console.log( data.slaJobs) ` HTML 中的 Pug 变量 ` table#table(div='') slaJobs 中的每一行`
可能是节点中的一条新路由，它将从客户端获取数据并再次呈现相同的视图但使用新数据？
是的..谢谢只是尝试..但我仍然不确定如何将新数据再次传递给nodejs ..对此的任何见解都会有所帮助..以下是新数据我通过 js 进行了 fetch 调用，我可以再次调用 diff route.. console.log(data.jobsHeader) window.location = "new route"
我正在尝试使用新路线...但仍然没有重新渲染，这里做错了什么.. againclicked 正在工作，但页面未渲染`首先调用准备数据 fetch('/clicked', { method: 'POST', headers: {"Content-Type": "application/json" } , body:JSON.stringify({searchKey:searchContent})}) 第二次调用渲染新数据 fetch('/againclicked', { method: 'POST', headers: {"Content-Type": "application/json" } , body:JSON.stringify({searchOut:data.slaJobs})})两个调用都在工作。但是第二个页面又没有呈现

【解决方案2】：

如果您通过 ajax 获取数据，您应该在 forEach 循环中迭代有效负载数据并将 HTML 生成到当前文档中。实际上 pug 在服务器上渲染，然后输出为 HTML 给用户。

当数据已经呈现并显示给用户时，您无法在 pug 视图引擎中显示数据。

一个样本：

fetch('localhost:3000/products')
   .then(data => data.json())
   .then(data => {
      var div= document.getElementById('div');
      data.forEach(item=>{
          var p = document.createElement('p');
          p.textContent = item[0] + ' ' + item[1];
          div.appendChild(p);
      }
   })

【讨论】：

我正在尝试使用新路线...但仍然没有重新渲染，这里做错了什么.. againclicked 正在工作，但页面未渲染`首先调用准备数据 fetch('/clicked', { method: 'POST', headers: {"Content-Type": "application/json" } , body:JSON.stringify({searchKey:searchContent})}) 第二次调用渲染新数据 fetch('/againclicked', { method: 'POST', headers: {"Content-Type": "application/json" } , body:JSON.stringify({searchOut:data.slaJobs})})两个调用都在工作。但是第二个页面又没有呈现
我猜你的过程基本上是错误的。你通过ajax发布数据，对吗？那么你想显示你发送到服务器的数据，对吧？但是您是否将数据存储在服务器上的某个位置？如果你做得不好，你在第二次通话中什么也得不到。正如我之前所说，哈巴狗只会在整页重新加载时呈现，并且您无法通过哈巴狗的 ajax 调用获取数据。您应该在客户端 javascript 上生成数据
是的.. 正在执行 Ajax 调用以获取数据并将数据发送到服务器并后处理通过响应获取数据，一切正常.. 在将数据分配给时遇到问题Pug 变量，以便在呈现的页面中更改数据。（它是一个显示和搜索页面）但是现在使用经典的提交按钮解决了这个问题并暂时重新加载页面..但 Ajax 将是首选选项。
@PraveenV 所以这就是我的意思，pug 只有在服务器上完全加载时才会呈现，如果想在通过 ajax 调用时显示你的数据，pug 是不可访问的，你需要生成您在 fetch 中的视图然后使用 javascript DOM 功能阻止，就像我上面放的示例一样。