Blog Tinux Net

Agregar un producto en la misma pagina si recargar

Añadir productos sin recargar la página

Para añadir productos a una base de datos sin recargar la página, se puede utilizar AJAX con fetch en el frontend y Express en el backend:

Backend (Express):

app.post('/addProduct', (req, res) => {
  const { productName } = req.body;
  connection.query('INSERT INTO products (name) VALUES (?)', [productName], (error, results) => {
    if (error) {
      return res.status(500).send('Error al añadir el producto');
    }
    res.send('Producto añadido');
  });
});

Frontend (HTML/JavaScript):

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Añadir Producto</title>
</head>
<body>
  <input type="text" id="productName" placeholder="Nombre del producto">
  <button onclick="addProduct()">Añadir Producto</button>
  <script>
    function addProduct() {
      const productName = document.getElementById('productName').value;
      fetch('/addProduct', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ productName: productName }),
      })
      .then(response => response.text())
      .then(data => alert(data))
      .catch(error => console.error('Error:', error));
    }
  </script>
</body>
</html>