A Very Simple Node/Express JSON Form Example

Server-side (file is named server)

This code is invoked with: node server

Once it is invokec, call the page with http://example.com:1337/form.html


// Express is a framework used with node that provides many important constructs
var express = require('express');

// The application is an Express application
var app = express();

// bodyParser is used to convert the request data into JSON
var bodyParser = require('body-parser');
app.use(bodyParser.json()); 

// Express.static is used to serve the static files
app.use(express.static('static'));

// This receives a request posted to / and processes it
app.post('/', function (req, res) {
	var data = req.body;
	if (data['first-name'].trim().length > 5 && data['last-name'].trim().length > 5) {
		res.end(JSON.stringify({"status":"success"}));
	} else {
		res.end(JSON.stringify({"status":"error"}));
	}
});

// The application will listen on port 1337
app.listen(1337);

Client-side

The client side code is in the static directory. There is a simple form:


<form>
	<label for="first-name">First name<input type="text" id="first-name"></label>
	<label for="last-name">Last name<input type="text" id="last-name"></label>
	<button type="button" id="go">Go</button>
</form>
<div id="status">
</div>

And a little bit of JavaScript.

This code fires when a button with the id of "go" is clicked. It gets the values of the inputs, creates an object and sends it to the server.

document.getElementById("go").onclick = function() {
	var i,v,inp = ["first-name","last-name"];
	var data = {};
	for (i in inp) {
		v = inp[i];
		data[v] = document.getElementById(v).value;
	}

	var xmlhttp;
	xmlhttp=new XMLHttpRequest();
	xmlhttp.addEventListener("load", done, false);

	function done()
	{
		response = JSON.parse(xmlhttp.response);
		document.getElementById("status").textContent = response["status"];
	}

	xmlhttp.open("POST","http://example.com:1337",true);
	xmlhttp.setRequestHeader("Content-type","application/json");
	xmlhttp.setRequestHeader("Accept","application/json");
	xmlhttp.send(JSON.stringify(data));
}

Notes for those who are patient or really desperate.

  • app.post doesn't make a post request, it accepts one with the URL in the first parameter. In this case, it will accept a post response for / on port 1337.
  • Express is a nice framework for node. Use it.
  • You need to use npm to install both Express and body-parser.
  • bodyParser parses the request body from JSON. It can handle other formats, too
  • Be sure to put the static files in the static directory, or update the express.static call accordingly.
  • Note that there is no charset on the content type header sent to node. Node is looking for "application/json"
  • The validation is really limited, the goal of this code is to show how to set up the form.
  • You may have to update your firewall settings to allow access to port 1337. If you are on an Amazon instance, use their web console.
  • When all else fails, read the documentation.