Node.js Ajax Request
I am running a node server which has no data. I want to dump the data to the server and then pick it up again on a button click. I tried other examples, but I am completely new to ajax requests and I want to understand that the code I am writing is what I am so far:
***script.js(Client file)***
$(document).ready(function() {
$.ajax({
url: 'http://localhost:8080',
dataType: "jsonp",
data: '{"data": "TEST"}',
type: 'POST',
jsonpCallback: 'callback',
success: function (data) {
var ret = jQuery.parseJSON(data);
console.log(data)
console.log('Success: ')
},
error: function (xhr, status, error) {
console.log('Error: ' + error.message);
},
});
$('#button').click(function(){
$.ajax({
url: 'http://localhost:8080',
dataType: "jsonp",
type: 'GET',
jsonpCallback: "callback",
success: function (data) {
var ret = jQuery.parseJSON(data);
console.log(data)
console.log('Success: Kick Ass!')
},
error: function (xhr, status, error) {
console.log('SOMETHING HAS GONE WRONG :(');
},
});
});
});
***Index.js(Server File)***
var http = require('http');
var util = require('util')
http.createServer(function (req, res) {
console.log('Request received: ');
util.log(util.inspect(req)) // this line helps you inspect the request so you can see whether the data is in the url (GET) or the req body (POST)
util.log('Request recieved: \nmethod: ' + req.method + '\nurl: ' + req.url) // this line logs just the method and url
res.writeHead(200, { 'Content-Type': 'text/plain' });
req.on('data', function (chunk) {
console.log('GOT DATA!');
});
res.end('callback(\'{\"msg\": \"OK\"}\')');
}).listen(8080);
console.log('Server running on port 8080');
Please, help. Many thanks!
+3
source to share
1 answer
I implemented the server in such a way as to serve your requests to display the html index, store the user in server memory, and send the user (stored in the server memory) to the client.
My index.js file looks like this:
var http = require('http');
var url = require('url');
var querystring = require('querystring');
var fs = require('fs');
var server = http.createServer();
var userStoredInMemory = {};
// listening requests from clients
server.on('request', function (request, response) {
var currentRoute = url.format(request.url);
var currentMethod = request.method;
var requestBody = '';
switch (currentRoute) {
// serving the html index to client
case '/':
fs.readFile(__dirname + '/index.html', function (err, data) {
var headers = {
'Content-Type': 'text/html'
};
response.writeHead(200, headers);
response.end(data);
});
break;
// handling requests from client with route /api/user
case '/api/user':
// if request is a POST, then the user is sending a user
if (currentMethod === 'POST') {
// reading the body of the request
request.on('data', function (chunk) {
requestBody += chunk.toString();
});
// once the body of the request was loaded
request.on('end', function () {
// saving the user sent on the request body
userStoredInMemory = querystring.parse(requestBody);
// responding to the user
var headers = {
'Content-Type': 'text/plain'
};
response.writeHead(200, headers);
response.end('User was already stored.');
});
}
// if request is a GET, then the client is requesting
// to see the user stored.
else if (currentMethod === 'GET') {
var headers = {
'Content-Type': 'application/json'
};
response.writeHead(200, headers);
response.end(JSON.stringify(userStoredInMemory));
}
break;
}
});
server.listen(8080, function () {
console.log('server up and running at 8080 port');
});
And the index html file looks like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Hello World!</h1>
<div>
<h1>Sending User</h1>
<form id="userForm">
<label for="name">Name</label>
<input id="name" name="name"/>
<br/>
<label for="age">Age</label>
<input id="age" name="age"/>
<br/>
<input type="submit" value="Send"/>
</form>
</div>
<br/>
<br/>
<div>
<h2>Click the button below for getting User from server and showing it</h2>
<button id="getUserButton">Get User</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(document).ready(function () {
$('#userForm').submit(function (e) {
var user = {
name: $('input[name=name]').val(),
age: $('input[name=age]').val()
};
$.ajax({
type: 'POST',
url: 'http://localhost:8080/api/user',
data: user
})
.done(function (data) {
// clear form
$('input[name=name]').val('');
$('input[name=age]').val('')
alert(data);
});
e.preventDefault();
});
$('#getUserButton').click(function (e) {
$.ajax({
type: 'GET',
url: 'http://localhost:8080/api/user'
})
.done(function (data) {
alert(JSON.stringify(data));
});
});
});
</script>
</body>
</html>
But see how the code and complexity decreases when using the framework when building your HTTP server, in this case Express.JS installs express and body parsing first :
so my index.js looked like this:
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var userStoredInMemory = {};
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
app.get('/api/user', function (req, res) {
res.json(userStoredInMemory);
});
app.post('/api/user', function (req, res) {
userStoredInMemory = req.body;
res.send('User was already stored from express.');
});
app.listen(8080, function () {
console.log('server up and running at 8080 port');
});
+2
source to share