Igo*_*Vuk 5 javascript ajax ejs node.js
我想弄清楚如何在 node.js 中使用 ajax 我现在有这个。当我按下名为 Press 的按钮时，如何在我的 div id="champ" 中显示例如 order[0].name 和 order[1].name。
应用程序.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});
});
主页.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>
脚本.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>
<% } %>
| 归档时间： |
|
| 查看次数： |
18218 次 |
| 最近记录： |