在带有ejs的Node.js中使用Ajax

2022-03-23 00:00:00 node.js javascript ajax ejs

我正在尝试弄清楚如何在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);
        }
      });

    })

});

解决方案

我认为您的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>
<% } %>

相关文章