I'm trying to pass multiple parameters via HTML form into a XMLHttpRequest. The request takes a network SSID and PSK and passes it to the /connect endpoint.
It works when I hardcode the SSID and PSK using:
var data = '{"ssid":"homenetwork", "psk":"mypassword"}';
xhr.send(data);
When I try to pull the data from the HTML form I get net::ERR_EMPTY_RESPONSE in Chrome.
<!DOCTYPE html>
<html>
<br>
<label for="network">Network Name (SSID):</label>
<input type="text" id="network" name="network" required size="15">
<label for="presharedkey">Network Password (PSK): </label>
<input type="text" id="presharedkey" name="presharedkey" required size="15">
<button onclick="connectWifi()">Save</button> <br>
<script>
function connectWifi() {
var network = document.getElementById("network") .value;
var presharedkey = document.getElementById("presharedkey") .value;
var url = "http://192.168.0.236:8080/connect";
var xhr = new XMLHttpRequest();
xhr.open("POST", url);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
console.log(xhr.status);
console.log(xhr.responseText);
}};
// var data = '{"ssid":"homenetwork", "psk":"mypassword"}';
var data = 'ssid='+network+'&psk='+presharedkey;
xhr.send(data);
}
</script>
</html>
The var data = line I pulled from this StackOverflow question.
Thanks in advance.
The data variable you are using needs to be a JSON object. In your example here it is a string, so the individual values are not passed, just one single string.
Try:
var data = `{"ssid": "${network}", "psk": "${presharedkey}"}`;[EDIT] I misunderstood the original question it seems. OP is trying to send the data as a JSON object but doesn't know how to format it (they claim manually passing the string of variables works).