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.
Print article | This entry was posted by elvis on 04/19/15 at 10:17:00 pm . Follow any responses to this post through RSS 2.0. |