如何从数据库获取/发送/提供/（使可访问）数据到静态 jquery 文件？从快速 EJS 到静态 Jquery？

Posted 2023-03-11

【中文标题】如何从数据库获取/发送/提供/（使可访问）数据到静态 jquery 文件？从快速 EJS 到静态 Jquery？

【英文标题】：How to, get/send/provide/(make accessible) data from a database to static jquery files? From express EJS to static Jquery?

【发布时间】：2019-12-10 00:03:02

【问题描述】：

显示问题的Youtube链接：https://www.youtube.com/watch?v=5BQU2n_GzbI

Github 链接：https://github.com/phy5prt/MyPersonalWebsite

如何从我的后端数据库中获取数据到前端的 jquery 中。上下文是我希望 jquery 在用户不查看它时更改 html 的一部分。 jquery 测量视口大小并使用此信息使用数据库数据生成许多卡片。

我正在自学编程，因此我首先制作了一个前端网站，然后我在其上添加了一个 mongoose ejs express 后端。因此，我的公共文件夹中有几个静态 js 文件。每个文件与一个视图屏幕相关，网页大小为 4 个视图屏幕。布局与第一个屏幕一样，您查看左下角第二个左上角第三个右中部，第四个再次位于左下角，但是当用户在第 2 页时，jquery 已经更改了 html 部分。

网站目前可以从后端提供一个 json 替换网站。它可以从保存在前端的 json 生成卡片。

非常感谢。我是新手，所以如果我的某些术语有误，请告诉我。我觉得这一定是一个很容易解决的问题，但也许我使用了错误的关键字或者对解决方案的理解不够好，无法知道我的问题的正确解决方案。

技术栈：html css jquery bootstrap express bodyparser mongoose

我的 app.js 代码

app.route("/")
.get(function(req,res)

ProjectCard.find()
.sort(overallProjectRating:-1)
.limit(4)
.exec(function(err,best4Cards)
  res.render("myWebsite", 
    page2BestCard:best4Cards[0]
    ,page3SecondBestCard:best4Cards[1]
    ,page3ThirdBestCard:best4Cards[2]
    ,page3FourthBestCard:best4Cards[3]

我的 pg.4 静态 jquery 代码使 html 像这样工作

 for(var j=0; j<projectCards[arrayLoopInt].technologiesArray.length; j++ )
          techArrayHtml += cardHtml2 + projectCards[arrayLoopInt].technologiesArray[j].technologyName +
          cardHtml3+projectCards[arrayLoopInt].technologiesArray[j].technologyImagePath+cardHtml4;

projectCards 只是另一个名为 dummyData 的文件中的 var，看起来像这个 var projectCards[,,,,[],[],] 使用与我的猫鼬模型相同的名称。

我已经阅读了一些与 ajax 和注入有关的内容，我希望我只是错过了一些明显的东西。

我尝试将 ejs 写入由静态 js 文件生成的 html，但 ejs 只是显示为正在写入，因为在呈现页面时它不存在。

我尝试在 javascript 文件中的 javascript 周围放置 ejs

我尝试但未能将信息从 ejs 传递到 html 并让 javascript 从 html 中获取它。

我尝试过模块导出，但静态 js 文件似乎不知道它是什么

我尝试在 html 中将 app.js 文件作为其静态 js 文件之一，这不起作用，我想如果它会非常狡猾。

提前非常感谢:)

【参考方案1】：

因此有人建议我避免使用 ajax，这就是为什么我的研究存在盲点，但这正是我所需要的。

这是我使用的代码

$.ajax(
  url: '/carousel',
  method: 'GET',
data: techButton: saughtTechnology,
 success: function (saughtTechnologyProjectCards) 
  // console.log("complete: getSaughtTechnology is returning: " + saughtTechnologyProjectCards.Length + " cards of technology: " + saughtTechnology +  " they look like this " + JSON.stringify(saughtTechnologyProjectCards) + "  " + JSON.stringify(saughtTechnologyProjectCards[0]))
  generateCarouselWithSaughtTechnologyCards(saughtTechnologyProjectCards);

 //data: query: saughtTechnology       //this is the bit i need to check if it is right
)
// .then(function (saughtTechnologyProjectCards) 
//   console.log("then: getSaughtTechnology is returning: " + saughtTechnologyProjectCards.Length + " cards of technology: " + saughtTechnology +  " they look like this " + saughtTechnologyProjectCards + "  " + saughtTechnologyProjectCards[0]);
//   //generateCarouselWithSaughtTechnologyCards(saughtTechnologyProjectCards);
// )
.catch(function (err) 
console.log(err);
);

else

  $("#carouselTechTitle").text("All "+ "Projects");generateCarouselWithSaughtTechnologyCards();

我还没有阅读它，因为我找到了我需要的东西，但如果你坚持使用相同的堆栈，这看起来是一个很好的资源

https://medium.com/datadriveninvestor/building-app-from-scratch-with-node-js-mongodb-e00d3179afc1