Using AJAX in Node.js with ejs
Question
I am tring to figure out how to use ajax in node.js I have this for now. 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.
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);
}
});
})
});
2 answers
solution1
1 ACCPTED 2016-12-28 21:20:53
Your ajax call is going to return everything in home.ejs I think. It's been awhile since I've done express, but I think the render method will render your .ejs template. Meaning when you make the ajax call your entire template will be put into the $('#champ') selector. 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.
You already have the order data when you make a GET request to "/". So you could just build the div's on the server:
<% 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>
<% } %>
solution2
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:
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
<!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
$(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);
}
});
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.