Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

233
Views
Cómo cambiar las variables del lado del servidor en el lado del cliente nextjs

Así que tengo este código en api/scraper.js

 const request = require("request-promise"); const cheerio = require("cheerio"); let url = "https://crese.org/distintivo-azul/"; let result; request(url, (err, response, html) => { if (!err && response.statusCode == 200) { const $ = cheerio.load(html); const allText = $("html *").contents().filter(function () {return this.type === "text"}).text(); const texts = ["respeto a la dignidad de las personas", "respect for the dignity of people"] result = allText.includes("respeto a la dignidad de las personas") } }) export default function handler(req, res) { res.status(200).json({result: result}) }

Funciona todo, pero la variable let url , necesita cambiar. Tengo un formulario para manejar este cambio, por lo que el usuario puede poner la url en el formulario de entrada desde el lado del cliente... ¿cómo se puede cambiar cuando el usuario envía la url desde el "formulario de entrada" del cliente y cambia esa url ? variable en el lado del servidor.

En palabras simples, "Modificar la variable de URL que está en api/scraper.js" con la etiqueta de formulario que está en el lado del cliente.

¿Alguna idea para manejar esto?

EDITAR El lado del cliente se ve así

 // Automate steps process const handleSubmit = async (event) => { event.preventDefault(); const response = await fetch("/api/scraper"); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); console.log(Object.values(result)) return setData(result) //console.log(event.target.url.value); }; // get results from backend const [results, setData] = useState([]) return ( <div> <Head> <title>Blue Token | Steps</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/logo.png" /> </Head> <div className={styles.minting}> <form onSubmit={handleSubmit}> <h1>Enter Your website URL</h1> <label>We are going to check if you have the requesits</label><br /><br /> <input type="url" name="url" placeholder="url" /> <input type="submit" /> </form>
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Puedes hacer algo como esto. Deberá pasar la URL del cliente dentro del cuerpo de la solicitud http

 function startScrape(req, res) { request(req.body, (err, response, html) => { if (!err && response.statusCode == 200) { const $ = cheerio.load(html); const allText = $("html *") .contents() .filter(function () { return this.type === "text"; }) .text(); const texts = [ "respeto a la dignidad de las personas", "respect for the dignity of people" ]; let result = allText.includes("respeto a la dignidad de las personas"); res.status(200).json({ result: result }); } }); } export default function handler(req, res) { if(req.method==='POST') startScrape(req, res); }

Cliente

 const [results, setData] = useState([]); const [url, setUrl] = useState(""); const handleSubmit = async (event) => { event.preventDefault(); // Here we're passing url inside body of the request which will // be received on the backend const response = await fetch("/api/scraper", { method: "POST", body: url }); if (!response.ok) { throw new Error(`Error: ${response.status}`); } const result = await response.json(); console.log(Object.values(result)); return setData(result); //console.log(event.target.url.value); }; return ( <div> <div> <form onSubmit={handleSubmit}> <h1>Enter Your website URL</h1> <label>We are going to check if you have the requesits</label> <br /> <br /> <input type="url" name="url" placeholder="url" value={url} onChange={(e) => setUrl(e.target.value)} /> <input type="submit" /> </form> </div> </div> );
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!