在Node.js中使用带有ejs的AJAX
[英]Using AJAX in Node.js with ejs
问题描述
I am tring to figure out how to use ajax in node.js I have this for now. 
我想知道如何在node.js中使用ajax我现在有这个。 How do i display for example order[0].name and order[1].name inside my div id="champ" when I press the button named Press. 当我按下名为Press的按钮时，如何在我的div id =“champ”中显示例如order [0] .name和order [1] .name。
app.js 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 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 的script.js
$(function() {
$("button").on("click", function () {
$.ajax({
type: 'GET',
url: '/',
success: function(result) {
$('#champ').html(result);
}
});
})
});
2 个解决方案
解决方案1
1 已采纳 2016-12-28 21:20:53
Your ajax call is going to return everything in home.ejs I think. 你的ajax调用将返回home.ejs中的所有内容。 It's been awhile since I've done express, but I think the render method will render your .ejs template. 我已经快速完成了一段时间，但我认为render方法将呈现你的.ejs模板。 Meaning when you make the ajax call your entire template will be put into the $('#champ') selector. 当您进行ajax调用时，您的整个模板将被置于$（'＃champ'）选择器中。 Also the $('#champ') selector is going to match on every div, but you're using an id on that element, and id's are reserved for individual items. 此外，$（'＃champ'）选择器将匹配每个div，但您在该元素上使用id，并且id是为单个项目保留的。
You already have the order data when you make a GET request to "/". 当您向“/”发出GET请求时，您已经拥有订单数据。 So you could just build the div's on the server: 所以你可以在服务器上构建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>
<% } %>
解决方案2
1 2016-12-28 21:56:11
I'm just copying code and making it up, it should point you in the right direction: 我只是在复制代码并进行编写，它应该指向正确的方向：
app.js: 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");
});
app.get("/orders", function (req, res) {
res.send(order);
});
home.ejs home.ejs
<!DOCTYPE html>
<html>
<head>
<title>
AJAX calls
</title>
</head>
<body>
<h1>Ajax</h1>
<div id="target">
</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 的script.js
$(function() {
$("button").on("click", function () {
$.ajax({
type: 'GET',
url: '/orders',
success: function(order) {
var html = '';
for (var i = 0; i< order.length; i++) {
html += '<h2>' + order[i].name + ' ' + order[i].drink + '</h2>';
}
$('#target').html(html);
}
});
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.