javascript - 追加获取的 ejs 项目

标签 javascript express append ejs fetch-api

目标: 我有一个按钮,运行一个函数来从我的 Mongoose 数据库加载更多项目并将它们添加到表行中。我使用 get 从服务器端获取和返回数据。我正在遵循 this post 的指示,但我仍然无法呈现我需要的内容。

客户端代码:

<main role="main">
<div class="container-fluid ">
  <div class="card-columns" id="test" value="<%=deals%>">
    <tbody>
      <tr id="content"><% include partials/row.html %></tr>
    </tbody>
  </div>
</div>
<div class="container" style="max-width: 25rem; text-align: center;">
  <a id="8-reload" class="btn more" onclick="loadMore(8)"></a>
</div>

<script >
  const loadMore = async function(x){
    const response = await fetch(`/${x}`);

    if (!response.ok)
      throw oops;
    const data =await response.text();
    console.log(data);
    console.log($("#content"));
    await document.getElementById('content').insertAdjacentHTML('beforeend',data);

}
</script>

服务器 JS 请求:

app.get(`/:count`, (req, res) => {
  const count = parseInt(req.params.count);
  database.find({}, (err, found) => {
    if (!err){
      res.render("more",{items:found},(err,html)=>{
        if(!err){
          res.send(html);
        }else{
          console.log(err);
        }
      });    
    } else {
      console.log(err);
    }
  }).skip(count).limit(25);
});

运行该函数时,没有任何反应,浏览器控制台日志读取长字符串 html。这就是我想要 append 到的地方:

jQuery.fn.init {} 原型(prototype):对象(0)

服务器控制台日志上没有错误。我缺少什么?

更新 我尝试 append 而不是 append 到内容来测试,你瞧,我正在 append html,只是不是我的所有内容。 int 只插入整个 html 模板的开头和结尾,中间不插入任何内容。诡异的。

最佳答案

好吧,看起来最大的问题是两件事。第一个问题是我正在 append 到内容无法 append 到的位置。第二个问题是我的模板从表行开始,其中包含更多内容,这不允许渲染其他内容。一旦我将 jquery 移至父 id 并删除表行,一切都会正常!

关于javascript - 追加获取的 ejs 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58843172/

相关文章:

node.js - Vanilla Node 与 express

jQuery 追加重复内容

python - 如何有条件地将 pandas 系列 append 到另一个数据框

javascript - jQuery 组合框验证

Javascript 函数返回整个函数而不是值

使用 Select 标签的 JavaScript 搜索日期

objective-c - 使用 Objective-C 写入 XML 文件

javascript - 如何解析 binary_compressed 点云?

javascript - 当您尝试引用架构时如何保存数据

node.js - Angular 不显示创建的对象,直到我刷新页面