Tengo este menú desplegable en ejs donde necesito mostrar una imagen predeterminada y una imagen personalizada cuando se envía algo en el formulario. Pero quiero hacer esto sin actualizar la página.
Importante: el botón de enviar no es necesario para mí, por lo que cambiar la imagen con solo hacer clic en el menú desplegable también será una solución para mí.
index2.ejs
<form action="/users/details" method="POST"> <fieldset> <select class="selectpicker" data-style="btn-info" name="selectpicker"> <optgroup label="Select Starting Station"> <option value="" selected disabled hidden style="text-align:center">From</option> <option name="table1" value="1">1</option> <option name="table2" value="2">2</option> </optgroup> </select> <input type="submit" id="submit-form" /> </fieldset> </form> <% if(imgsrc == 0) { %> <img src = "/images/default.png" /> <% } else if(imgsrc == 1) { %> <img src = "/images/1.png" /> <% } else if(imgsrc == 2) { %> <img src = "/images/2.png" /> <% } %> y users.js
var variabled = 0; router.get("/index2", function(req, res, next) { console.log(variabled); res.render("index2", {title: 'some data', imgsrc : variabled}); variabled = 0; }); router.post("/details", function(req, res, next) { variabled = req.body.selectpicker; console.log(variabled); res.redirect("/users/index2"); })Este código funciona bien, pero la página se actualiza cada vez que hago clic en enviar. Quiero que la imagen cambie sin actualizar la página.
Tengo conjeturas sobre ajax y event.preventDefault() pero no sé cómo implementarlas.
Gracias por adelantado
Puede crear una ruta separada para publicar datos en el servidor.
app.post('/test', (req, res) =>{ const testObject = { name:'John Doe', email:'john@email.com' }; res.json(testObject); });En el lado del cliente, puede usar [fetch API] [1] para hacer una solicitud de publicación.
fetch('http://example.com/test', { method: 'POST', // *GET, POST, PUT, DELETE, etc. }, headers: { 'Content-Type': 'application/json' // 'Content-Type': 'application/x-www-form-urlencoded', }, body: JSON.stringify(data) // body data type must match "Content-Type" header ) .then(res => res.json()) .then(data => { return console.log(data)}) .catch(err => { return console.log(err)} )También puede usar XMLHttpRequest en el navegador.