Envío de solicitudes GET a través de AJAX en JavaScript
Ahora aprendamos a transmitir datos al servidor en una solicitud AJAX. El servidor hará algo con estos datos y nos enviará de vuelta el resultado.
Nuestro servidor de prueba procesará
los datos enviados a la dirección
/handler/:
button.addEventListener('click', function() {
let promise = fetch('/handler/');
});
Para empezar, enviemos una solicitud GET:
button.addEventListener('click', function() {
let promise = fetch('/handler/?num=3');
});
Obtengamos los datos enviados en el lado del servidor:
export default {
'/handler/': function({get}) {
console.log(get.num); // mostrará 3
}
}
Hagamos algo con estos datos y enviémoslos de vuelta:
export default {
'/handler/': function({get}) {
return get.num ** 2;
}
}
En el lado del cliente, obtendremos el resultado y lo mostraremos en algún lugar:
button.addEventListener('click', function() {
fetch('/handler/?num=3').then(
response => {
return response.text();
}
).then(
text => {
console.log(text);
}
);
});
En el cliente, hay un div y un botón. Al hacer clic en el botón, envíe dos números al servidor. Deje que el servidor encuentre la suma de los números transmitidos. Escriba el resultado en el div.
Supongamos que en el servidor hay un array. Deje que el servidor espere que se transmita un número como parámetro, y que devuelva el elemento del array correspondiente a ese número. Al hacer clic en el botón, transmita un número al servidor, y muestre la respuesta del servidor en un párrafo.