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

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" />

Collectives™ on Stack Overflow

sending variables via AJAX POST

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related