gpt4 book ai didi

javascript - 在带有 ejs 的 Node.js 中使用 AJAX

转载 作者:搜寻专家 更新时间:2023-10-31 23:20:12 25 4
gpt4 key购买 nike

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

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>
<% } %>

关于javascript - 在带有 ejs 的 Node.js 中使用 AJAX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41369780/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com