Node, Express, Ajax, and Jade Example

Question

I'm looking for a simple example of a Node/Express/Jade page being updated using an Ajax call with both the client and server side code.

I'm having a bit of trouble putting it all together in my head.

Answer 1

There are great many ways this could be done and it's not immediately apparent which approach you want to take.

I suppose the simplest scenario would be to add some client-side logic to fetch pieces of html from the server and update the client. This is easily achieved using jQuery (put it inside a document ready block to wire up the event):

$('#button').click(function() {
     $.get('/some/url', {foo: 42}, function(result) {
         $('#target').html(result);
     }
}

This way all your html is generated on the server and you simply fetch and insert it into the page as needed.

You could also fetch json from the server and render the html on the client, but that is one of the alternative approaches. I highly recommend giving TodoMVC a look - it's a todo-list application with many different implementations (each using a different framework) and therefore a great learning resource for the various approaches and helper libraries.

I'd also recommend the Hands-on Node.js book. It will help you understand routing and how to get started with Node.