Estoy usando titiritero para raspar un sitio web de trabajo. Todo está funcionando hasta ahora.
app.get('/', async (req, res) => { res.render('index', {text: 'This is the index page'}); })Al enviar, el usuario es redirigido a un archivo ejs
<body> <div class="container"> <input type="text" class="submit" id="city-input" placeholder="Submit City"> <button type="submit" onclick="submitCity()">Submit</button> </div> </body>guión.js
function submitCity() { const city = document.getElementById('city-input').value; const url = 'http://localhost:3000/api/germany/' + city window.location.href = url; console.log(city); }índice.js
app.get('/api/germany/:key', async (req, res) => { const city = req.params.key; const data = await scraper.scrapeData(city); await db.updateDB(data); await res.render('result', { data: data }); })Entonces, cuando el usuario hace clic en enviar, puede tomar alrededor de 1-2 minutos hasta que la página de resultados esté lista. Quiero agregar una página/información de carga hasta que los datos se extraigan y estén listos para enviar.
Puede usar fetch para realizar la solicitud en segundo plano:
function submitCity() { const city = document.getElementById('city-input').value; const url = 'http://localhost:3000/api/germany/' + city const response = await fetch(url); // make initial request const data = await response.json(); // wait for response body, then parse as json console.log(data); }Y en el servidor, simplemente devuelva los datos a la solicitud:
app.get('/api/germany/:key', async (req, res) => { const city = req.params.key; const data = await scraper.scrapeData(city); await db.updateDB(data); return res.json(data); });