Menu
I am currently using Express.js to create my website.
My main server script is called index.coffee. I also created a script called request.js that makes a GET request and displays the response with
console.log(list);
I have no problems when running the script from the console: node request.js
My question is: How do I make the "Get this list" button on my the page respond to a click by displaying the list on the same page (that is, executing request.js on the server and showing the result)?
app.js
/**
* Module dependencies.
*/
var express = require('express')
, routes = require('./routes');
var app = module.exports = express.createServer();
// Configuration
app.configure(function(){
app.set('views', __dirname + '/views');
app.set ('view engine', 'coffee');
app.register('.coffee', require('coffeekup').adapters.express);
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});
app.configure('development', function(){
app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));
});
app.configure('production', function(){
app.use(express.errorHandler());
});
app.get('/', function(req, res) {
res.render('index',{ layout: false });
});
app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env);
index.coffee
doctype 5
html ->
head ->
body
p -> "hey"
299
Using Clean architecture for Node. For sending larger code, we definitely require to have a separate file for html code. Response object gives a sendFile() function to return a html file to client. How to provide path to html file in sendFile() ? We import the path core module of node.
Thanks to some creative engineers, it is now feasible to use Node. js modules in browsers, but not directly. Being able to call Node. js modules from JavaScript running in the browser has many advantages because it allows you to use Node.
I use plain JS and not coffee script, so here's an example per Fosco's comment (call it server.js):
var express = require('express'),
list = require('./request.js').Request; // see template
var app = express.createServer();
app.use(express.static(__dirname + '/public')); // exposes index.html, per below
app.get('/request', function(req, res){
// run your request.js script
// when index.html makes the ajax call to www.yoursite.com/request, this runs
// you can also require your request.js as a module (above) and call on that:
res.send(list.getList()); // try res.json() if getList() returns an object or array
});
app.listen(80);
Write your index.html file, and save it in the /public subfolder of your node app directory (which is exposed above, via express.static).:
<html>
<body>
<div id="button">Get this List</div>
<div id="response"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function() {
// run an AJAX get request to the route you setup above...
// respect the cross-domain policy by using the same domain
// you used to access your index.html file!
$.get('http://www.yoursite.com/request', function(list) {
$('#response').html(list); // show the list
});
});
});
</script>
</body
</html>
If you're including your request.js as a module, it could be as follows:
var RequestClass = function() {
// run code here, or...
};
// ...add a method, which we do in this example:
RequestClass.prototype.getList = function() {
return "My List";
};
// now expose with module.exports:
exports.Request = RequestClass;
Run node server.js on your server. Then head over to www.yoursite.com/index.html
57
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
