我正在努力弄清楚如何在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中的所有内容。自完成表达以来已经有一段时间了，但是我认为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 - 在e.js中的Node.js中使用AJAX，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41369780/