sending variables via AJAX POST

Question

I am trying to send a variable that contains a name to a server using the POST method. This is suppose to be Asynchronous. I have the following code written but I am getting an error, SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data and honestly it isn't too helpful.

I downloaded firebug and firebug gets me a little closer as it says the error is on line 84 column 17 (I wasn't sure what to make of column so I counted 17 characters in). If this is the case, then it says my problem is starting with the word parse.

I am new to AJAX so I am not sure what you guys do and don't need to see, but I will start by showing this bit of code where I think the problem resides.

        function sendByPost()
        {
            var name = getName();
            var req = new XMLHttpRequest();
            req.open("POST", "http://httpbin.org/post", true);
            req.setRequestHeader('Content-Type', 'application/json');
            req.send('{"Tom"}');
            console.log(JSON.parse(req.responseText));
        }
        function getName()
        {
            return document.getElementById("myName").value;
        }

I also do not want it to say Tom on the 7th line down and my intention is for it to say whatever the user types in. So I setup a name variable that would get the value inside the text box.

Doing the following doesn't work though:

            req.send('{name}');

This question should help you a bit. You need to send the data in the format expected by the POST request. So you could create a variable called data, and set it to something like this. var data = "name=" + encodeURIComponent(name) — Brandon Anzaldi
– Brandon Anzaldi, Commented Nov 4, 2015 at 21:09
"Doing the following doesn't work though:" How are you testing that? (other than the fact that {"Tom"} is invalid json) — user400654
– user400654, Commented Nov 4, 2015 at 21:12
You're also sending the request then immediately parsing the response, which won't work: it's async. I think you might want to take a step back, and possibly consider using jQuery until you understand the basics. — Dave Newton
– Dave Newton, Commented Nov 4, 2015 at 21:18

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-11-04 21:50:32Z

2

Basically, you need to send an object in the request.

I've made a simple demo:

function sendByPost() {
  var name = getName(); // Get the value from the input field.
  var req = new XMLHttpRequest();

  var data = {}; // Declare an object.
  data.name = name; // The data object has the name attribute with the value.

  req.open("POST", "http://httpbin.org/post", true);
  req.setRequestHeader('Content-Type', 'application/json');
  req.send(JSON.stringify(data)); // Send the data object as json string.
  req.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) { // Check for the status of the response
      console.log(JSON.parse(req.responseText)); // Prints the results.
    }
  };
}

function getName() {
  return document.getElementById("name").value;
}
sendByPost();

<input type="text" id="name" value="Test" />

edited Nov 4, 2015 at 21:50

answered Nov 4, 2015 at 21:39

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

sending variables via AJAX POST

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related