I am running a node server that has no data on it. I want to push data up to the server and then take it down again on a button click.I've tried following other examples but I'm quite new to ajax requests and I want to understand the code that I'm writing this is what I have 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. Thanks so much!

I am running a node server that has no data on it. I want to push data up to the server and then take it down again on a button click.I've tried following other examples but I'm quite new to ajax requests and I want to understand the code that I'm writing this is what I have 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. Thanks so much!

• javascript
• jquery
• ajax
• node.js
• express

• why are you using jsonp? – B3rn475 Commented Jun 11, 2015 at 11:30
• Because the servers listening on localhost:8080 while the app runs on localhost:3000. To make requests from one to the other you must use jsonp... I think. Like I said I'm very new to this – CHeffernan087 Commented Jun 11, 2015 at 11:37
• There is good reason to split the app in two ponents? – B3rn475 Commented Jun 11, 2015 at 11:40
• It is just a question to understand which is the objective of the project. – B3rn475 Commented Jun 11, 2015 at 11:59
• Ehmmmm.. I'm not sure. whenever i tried to tell the server to listen on port 3000 the server crashed becuase the port number was already in use. I'm still in high school, so my knowledge of all this is very limited :( – CHeffernan087 Commented Jun 11, 2015 at 14:37

1 Answer 1

I implemented a server in a way to serve your requests of showing the index html, saving the user on server memory, and sending the user (stored on the memory server) 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./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 look how the code and plexity reduces when you use a framework when you are creating your HTTP Server, in this case Express.JS, first install express and body parser:

so my index.js looked like:

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');
});