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. How do i display for example order[0].name and order[1].name inside my div id='champ' when I press the bu
Solution 1:
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>
<% } %>
Solution 2:
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);
}
});
});
});
Post a Comment for "Using AJAX In Node.js With Ejs"