在带有ejs的Node.js中使用Ajax [英] Using AJAX in Node.js with ejs
本文介绍了在带有ejs的Node.js中使用Ajax的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
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>
<% } %>
这篇关于在带有ejs的Node.js中使用Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
