Uso nodejs (en un contenedor docker-compose, no estoy seguro de si eso es relevante) para configurar una aplicación web local. Me gustaría usar jquery en el lado del cliente para cargar un archivo HTML en un div. Desafortunadamente, no está funcionando. El index.html inicial y el new.html están en la misma carpeta (/frontend/). ¿Qué me estoy perdiendo?
Aplicación Nodejs:
var app = express(); // home route returns rendered html content app.get("/", (req, res) => { res.sendFile(__dirname + "/frontend/index.html"); }); app.listen(3000, function(){ console.log('Example app listening on port 3000!'); });índice.html:
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script> <script type="text/javascript"> $(document).ready(function(){ $("#imported").load("new.html"); }); </script> </head> <body> <div> This is content of the index HTML and below is the imported HTML:</div> <div id="imported"></div> </body> </html>Por último, el HTML que quiero importar new.html:
<HTML> <head> </head> <body> <p>This is demo text.<p> </body> </html>Simplemente use express.static() para servir archivos HTML estáticos
const app = express(); app.use(express.static("frontend")) app.listen(3000, function(){ console.log('Example app listening on port 3000!'); });Si lo que busca es un servidor de archivos estático simple y antiguo, es posible que le resulte más sencillo...
npx serve frontendBásicamente, el archivo new.html no se sirve.
Necesita usar el siguiente código para servir archivos públicos en un directorio llamado public .
var app = express(); // Put new.html into public folder. // /public/new.html // /frontend/index.html app.use(express.static('public')) // home route returns rendered html content app.get("/", (req, res) => { res.sendFile(__dirname + "/frontend/index.html"); }); app.listen(3000, function(){ console.log('Example app listening on port 3000!'); });