CODEWITHSUNDEEP
javascripthtmlajaxjsonnode.js
msmahon
msmahon

Reputation: 434

AJAX Request Body Empty (No jQuery)

I am trying to solve this problem without using jQuery so that I can have a better understanding of how things work.

I am sending an AJAX request to a node server with a JSON object. The server can receive the request and respond but the request body is always empty. I have tried setting the request header to 'application/json' but for some reason this changes the form submission to POST the parameters to the URL, rather than use the Javascript function. If anyone could tell me why that is happening as well it would be much appreciated.

Form

<form onsubmit="sendEmail(); return false;">
  <input type="text" name="fromEmail">
  <input type="text" name="subject">
  <textarea name="message" rows="14"></textarea>
  <input type="submit" value="SEND">
</form>

Email Function

function sendEmail() {

  var emailContent = JSON.stringify( 
    {
      email: $('input[name=fromEmail]').val(),
      subject: $('input[name=subject]').val(),
      message: $('textarea[name=message]').val()
    }
  );

  var httpRequest;
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
  } else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
  }

  httpRequest.open('POST','/message', true);
  httpRequest.onreadystatechange = function() {
    if (httpRequest.readyState == 4 && httpRequest.status == 200) {
      alert(httpRequest.responseText);
    }
  }

  httpRequest.send(emailContent);
}

Node JS Routing

var express = require('express');
var bodyParser = require('body-parser');
var app = express();

// set body parser
app.use(bodyParser.json());

// Process email form
app.post('/message', function(req,res) {
  console.log('Request received by email path.');  
  console.log(req.body);
  res.send('{"success": true}')
  console.log('Response sent.')
});

Upvotes: 2

Views: 1782

Answers (3)

bcngr
bcngr

Reputation: 845

I think I understood your problem, what you need is to call the function sendEmail() without doing a postback. Well, for this you will nead a regular html button instead of a form submit. Forms are used to execute server requests to an specific url and generate another postback.

You have two options:

1) Do a client side call using a button and an ajax request (XMLHttpRequest): 

<input type="text" name="fromEmail">
<input type="text" name="subject">
<textarea name="message" rows="14"></textarea>
<input type="submit" value="SEND">
<button type="button" onclick="sendEmail()">Send</button>

2) Use a form submit and call the service directly form the form. The parameters will be taken from the form and will be sent in the request:

<form action="/message" method="post">
  <input type="text" name="fromEmail">
  <input type="text" name="subject">
  <textarea name="message" rows="14"></textarea>
  <input type="submit" value="SEND">
</form>

Then in the server side you can access the data using the names you gave to the fields:

fromEmail = req["fromEmail"]

Upvotes: 1

bcngr
bcngr

Reputation: 845

You can try this:

httpRequest.open('POST','/message', true);
httpRequest.setRequestHeader("Content-Type","application/json");
httpRequest.send(emailContent);

Reference: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

Upvotes: 1

jozzy
jozzy

Reputation: 2943

If you are trying to send json response, you need to set the content type of response as json.

 res.setHeader('Content-Type', 'application/json');

Upvotes: 1

Related Questions