Question

0

332

Views

Cómo llamar a la función del lado del servidor desde el botón html (no en un formulario) usando ExpressJS

Tengo una aplicación express con un index.js que tiene lo siguiente:

 <form method="post" action="searchAll"> <input type="text" name="keyword"/> <button type="submit">Submit</button> </form>

Esto funciona bien como un formulario que toma una palabra clave y busca en mi base de datos y luego sigue con un POST de los resultados.

Pero puedo tener un botón como este:

 <button id="refreshDB">REFRESH DATABASE</button></br>

que no envía ningún dato al servidor que no sea llamar a una función del lado del servidor? La función (ubicada en app.js o db.js en el servidor) no toma parámetros y no realiza un seguimiento con una solicitud de publicación. Estoy pensando en algo como lo siguiente:

 <button id="refreshDB">REFRESH DATABASE</button> <script> var button = document.getElementById('refreshDB'); button.addEventListener('click', function() { // SOMEHOW TELL SERVER TO RUN FUNCTION // similar to the html <form method="post" action="refreshDB">? }); </script>

Sé que me estoy perdiendo algo realmente básico. Tengo una comprensión básica del enrutamiento, pero no tengo idea de cómo usar uno para una simple llamada de función unidireccional. Toda la ayuda que encuentro generalmente usa un formulario para enviar datos. La documentación de ExpressJS es útil, pero solo puedo encontrar el código del lado del servidor cuando se trata de rutas como esta.

Esta pregunta popular es algo similar, pero la respuesta usa un formulario.

¿Puede ayudarme a identificar qué 'cosa' básica me estoy perdiendo? ¡Gracias!

about 4 years ago · Santiago Trujillo

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-14T18:28:08.157Z

Debe hacer una llamada AJAX a su servidor (una ruta API) y luego lidiar con el resultado.

Una 'llamada AJAX' es una solicitud HTTP asíncrona, lo que significa que no tendrá que volver a cargar su página para obtener la respuesta de su solicitud (a diferencia de la etiqueta del form ).

Hacer una llamada AJAX

Javascript (puro / Vainilla) [EN EL LADO DEL CLIENTE]

 function myAjaxCall(url, data, callback) { var req = new XMLHttpRequest(); req.open("POST", url, true); req.send(data); req.onload = function(e) { if (this.status == 200) { // if the HTTP response code is 200 (OK) callback(e.responseText); // passing the result of the request to the callback function } }; }

JQuery [Del LADO DEL CLIENTE]

 $.ajax({ method: "POST", url: "http://your.server/route/url", data: "The data you want to send to your server" }).done(function(res) { console.log(res); // the value returned by the server (deal with it) });

EDITAR: Hacer que funcione con el botón [EN EL LADO DEL CLIENTE]

 var yourData = "The data you want to send to your server"; var url = "http://your.server/route/url"; var button = document.getElementById('refreshDB'); button.onclick = function(e) { // (almost the) same as addEventListener myAjaxCall(url, yourData, function uselessName(result) { console.log(result); }); }

Creación de una ruta API con Express y Nodejs [EN EL LADO DEL SERVIDOR]

Supongo que ya tiene un servidor Express, por lo que tiene el objeto de la app .
Digamos que la dirección de su servidor es ' http://your.server '. La forma más sencilla de crear una ruta POST (no la mejor si está creando una aplicación grande) es la siguiente:

 app.post('/route/url', function(req, res) { console.log(req.body); // this will output "The data you want to send to your server" var data = yourFunction(); res.status(200).send(data); // the status 200 is the default one, but this is how you can simply change it })

EDITAR - esto es lo que realmente sucede:

Hace clic en el botón, entra en el controlador de eventos (la función después de la palabra clave onclick )
Utiliza la función myAjaxCall
Esta función hace la solicitud (llamada Ajax)
Se llama a req.onload (porque recibe la respuesta de la solicitud, es decir, los datos provienen del servidor)
usamos la función que se pasa en el parámetro como tercer argumento de la función myAjaxCall y pasamos el resultado de la solicitud como parámetro
esta función (llamada uselessName porque en realidad no necesita un nombre) simplemente registrará el resultado.

Espero eso ayude,

Saludos

0

332