在带有 ejs 的 Node.js 中使用 AJAX答案

【问题标题】：Using AJAX in Node.js with ejs在带有 ejs 的 Node.js 中使用 AJAX
【发布时间】：2019-03-29 16:31:30
【问题描述】：

我想弄清楚如何在 node.js 中使用 ajax 我现在有这个。我如何在我的内部显示例如 order[0].name 和 order[1].name 当我按下名为 Press 的按钮时，div id="champ"。

app.js

var express = require("express");
var app = express();
app.use(express.static("public"));
app.set("view engine", "ejs");

var order = [
    {
        id: 1,
        name: "James",
        drink: "Coffee"
    },
    {
        id: 2,
        name: "John",
        drink: "Latte"
    }
];

app.get("/", function (req, res) {
    res.render("home", {order: order});
});

home.ejs

<!DOCTYPE html>

<html>
    <head>
        <title>
            AJAX calls
        </title>
    </head>
    <body>
        <h1>Ajax</h1>

        <% for (var i = 0; i< order.length; i++) { %>
            <div id="champ">

            </div>
        <% } %>

        <button>Press</button>

        <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script type="text/javascript" src="javascripts/script.js"></script>
    </body>

</html>

script.js

$(function() {

    $("button").on("click", function () {
        $.ajax({
        type: 'GET',
        url: '/',
        success: function(result) {
             $('#champ').html(result);
        }
      });

    })

});

【问题讨论】：

标签： javascript ajax node.js ejs

【解决方案1】：

我认为您的 ajax 调用将返回 home.ejs 中的所有内容。自从我完成 express 已经有一段时间了，但我认为 render 方法会渲染你的 .ejs 模板。这意味着当您进行 ajax 调用时，您的整个模板将被放入 $('#champ') 选择器中。此外，$('#champ') 选择器将匹配每个 div，但您在该元素上使用了一个 id，而 id 是为单个项目保留的。

当您向“/”发出 GET 请求时，您已经拥有订单数据。所以你可以在服务器上构建 div：

<% for (var i = 0; i< order.length; i++) { %>
    <div id="champ">
        <span><%= order[i].id %></span>
        <span><%= order[i].name %></span>
        <span><%= order[i].drink %></span>
    </div>
<% } %>

【讨论】：

你打败了我，你是对的！第二段和代码最重要
嗨。谢谢理查德。是的。它正在返回一切。我知道我可以像这样构建 div，但我只是做了这个简单的示例，以了解如何使用以及如何在 node.js 中使用 ajax。也许我的例子离我很远，但如果有人知道一个工作代码以及如何实现类似的东西，那么在这里写它会有所帮助。
我刚刚添加了另一个答案。
如何在不重新加载 ejs 页面的情况下获得更新的响应？

【解决方案2】：

我只是在复制代码并编写它，它应该为您指明正确的方向：

app.js：

var express = require("express");
var app = express();
app.use(express.static("public"));
app.set("view engine", "ejs");

var order = [
  {
    id: 1,
    name: "James",
    drink: "Coffee"
  },
  {
    id: 2,
    name: "John",
    drink: "Latte"
  }
];

app.get("/", function (req, res) {
    res.render("home");
});
app.get("/orders", function (req, res) {
    res.send(order);
});

home.ejs

<!DOCTYPE html>

<html>
  <head>
    <title>
      AJAX calls
    </title>
  </head>
  <body>
    <h1>Ajax</h1>

      <div id="target">
      </div>

    <button>Press</button>

    <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="javascripts/script.js"></script>
</body>

</html>

script.js

$(function() {
  $("button").on("click", function () {
    $.ajax({
      type: 'GET',
      url: '/orders',
      success: function(order) {
        var html = '';
        for (var i = 0; i< order.length; i++) {
            html += '<h2>' + order[i].name + ' ' + order[i].drink + '</h2>';
        }
        $('#target').html(html);
      }
    });
  });
});

【讨论】：

谢谢。我尝试过这个。 script.js 中有些地方不太对劲。 html 正在返回 undefined 而不是 order 也许它应该是结果。我会尝试改变它以使其正常工作。唯一需要担心的是，我试图避免 script.js 中的逻辑，并将其全部保存在 ejs 中，但调用除外。我们也为此制作/订单。当我有很多数据要从该数据库以这种方式发送时，我会发现它变得非常混乱。