es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Pasando múltiples parámetros por POST mediante XMLHttpRequest y HTML

01 Aug, 2023 Programación

Estoy tratando de pasar múltiples parámetros a través de un formulario HTML utilizando XMLHttpRequest. La solicitud toma una red SSID y PSK y las pasa al punto final /connect.

Funciona cuando codifico en duro el SSID y PSK utilizando:

var data = '{"ssid":"homenetwork", "psk":"mypassword"}';
xhr.send(data);

Cuando intento extraer los datos del formulario HTML, obtengo net::ERR_EMPTY_RESPONSE en Chrome.

<!DOCTYPE html>
<html>
<br>

<label for="network">Nombre de la red (SSID):</label>
<input type="text" id="network" name="network" required="" size="15">

<label for="presharedkey">Contraseña de la red (PSK): </label>
<input type="text" id="presharedkey" name="presharedkey" required="" size="15">


<button onclick="connectWifi()">Guardar</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>

La línea var data = la tomé de esta pregunta de StackOverflow.

Gracias de antemano.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema con pasar múltiples parámetros a través de un formulario HTML en un XMLHttpRequest puede tener diferentes causas, pero aquí hay algunas cosas para verificar:

    Primero, asegúrese de que el punto final /connect esté configurado para recibir datos en el formato que está enviando. En este caso, parece que el punto final recibe datos JSON, por lo que se necesita xhr.setRequestHeader("Content-Type", "application/json"); para establecer correctamente el encabezado de la solicitud.

    Segundo, verifique que los valores que obtiene del formulario HTML sean válidos y no estén vacíos. Puede depurar esto usando console.log(network, presharedkey) antes de la línea var data para ver si los valores son los que espera.

    Tercero, si desea pasar los datos como JSON, primero debe serializarlos. Puede usar JSON.stringify() para convertir el objeto JavaScript en una cadena JSON. Por ejemplo:

    var data = JSON.stringify({
  ssid: network,
  psk: presharedkey
});

    O, si desea pasar los datos como datos de formulario codificados en URL, puede usar new URLSearchParams() para crear una cadena codificada en URL. Por ejemplo:

    var data = new URLSearchParams({
  ssid: network,
  psk: presharedkey
}).toString();

    ¡Espero que esto ayude!

Comments are closed.