AJAX 更新 EJS 中的变量答案

【问题标题】：AJAX updating variables in EJSAJAX 更新 EJS 中的变量
【发布时间】：2022-01-07 09:22:56
【问题描述】：

我第一次尝试使用 ajax。我有一个工作站点并希望对其进行改进，因此我不想在每个帖子上重定向客户端，我想使用 AJAX 并使用 node.js 在后端进行数据库调用。

对于 HTML，我使用的是 EJS。我想让 AJAX 在页面加载时被调用。所有这些都已经开始工作了。

我的问题是，我在 EJS 中使用了 if 调用。

类似：

if(variableX === 0){
render this header
} else{
render login header with name
}

后端的函数被调用，但它不会渲染我的 EJS 文件中的变量。

谁能帮忙？

EJS：

  <script type="text/javascript">
  $(document).ready(function() {
    $.ajax({
             type: 'post',
             url: '/',
             dataType: 'text',
             async: false
         })
  });
  </script>  <script type="text/javascript">
  $(document).ready(function() {
    $.ajax({
             type: 'post',
             url: '/',
             dataType: 'text',
             async: false
         })
  });
  </script>

pages.js：

    res.render('home', {
    pageName: "",
    userName: result[0].twitchName,
    isLive: liveStatus,
    userID: result[0].id,
    benachrichtigung: benachrichtigung,
    twitchPBUrl: twitchPBLink
  });
}

提前非常感谢你:)

最好的问候，乔希

【问题讨论】：

async: false 是一个非常非常糟糕的主意。它早已被弃用，在所有国家/地区都应该是非法的。
长话短说，您正在调用您的服务器，该服务器使用 HTML 文本（这是呈现的 EJS 模板的结果）进行回复。因此，您的浏览器会在幕后接收到这个 HTML……并且什么也不做。这不是自动的，您需要处理收到的内容并对其进行处理，更新 DOM 等。
谢谢，我刚试了调试。我想删除那个:)
@JeremyThille 谢谢你的回答，但我理解昆汀的评论。不应该为此使用 Ajax。我会的，Javascript 会用我的响应来操纵 HTML。我只需要更改对某些变量的响应并使用它们。我认为这将是最干净的方法。 :)

标签： javascript node.js ajax ejs

【解决方案1】：

Ajax 的重点在于：

您使用 JS 发出 HTTP 请求
对该请求的响应提供给 JS

它没有：

在浏览器视口中自动呈现响应
时光倒流并更改用于创建您正在查看的 HTML 文档的响应的数据

您可以：

提交<form> 而不是使用 Ajax。对表单提交的响应在视口中呈现（与点击链接或在地址栏中键入 URL 的方式相同）。
编写 JavaScript 以使用响应来更新当前页面的 DOM

【讨论】：

非常感谢您的回答。我想我现在更好地理解了 Ajax。因此，像这样使用 Ajax 并不是最好的方法。我将尝试在成功时使用 javascript 操作 html：来自 ajax。我认为这应该是最干净的方式:)。