Per agregar al formulari la visualitzacio de la taula he agregat amb send_from_directory conexio de la base de dades amb el html
Pàgina amb Menú i Iframe
//codi de la pagina superior
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Web amb Menú i Iframe</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
h2 {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
}
.menu-nivell-1 {
display: flex;
flex-wrap: wrap;
justify-content: center;
background-color: #333;
color: white;
}
.menu-nivell-1 > div {
position: relative;
margin: 0.5rem;
cursor: pointer;
}
.menu-nivell-2 {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #555;
min-width: 150px;
z-index: 1;
}
.menu-nivell-2 div {
padding: 0.5rem;
cursor: pointer;
}
.menu-nivell-2 div:hover {
background-color: #666;
}
.menu-nivell-1 > div:hover .menu-nivell-2 {
display: block;
}
iframe {
flex: 1;
width: 100%;
border: none;
}
@media (max-width: 768px) {
.menu-nivell-1 {
flex-direction: column;
align-items: stretch;
}
.menu-nivell-1 > div {
text-align: center;
}
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('contingut');
if (iframe) {
iframe.addEventListener('load', () => {
console.log("carregat");
console.log("URL assignada:", iframe.src);
});
} else {
console.warn("No s'ha trobat l'iframe amb id 'contingut'");
}
});
</script>
</head>
<body>
<header>
<h2>Pàgina amb Menú i Iframe</h2>
</header>
<nav>
<div class="menu-nivell-1">
<div>
Secció 1
<div class="menu-nivell-2">
<div onclick="canviaIframe('https://www.example.com')">Pàgina 1.1</div>
<div onclick="canviaIframe('https://www.wikipedia.org')">Pàgina 1.2</div>
</div>
</div>
<div>
Secció 2
<div class="menu-nivell-2">
<div onclick="canviaIframe('https://www.google.net')">Pàgina 2.1</div>
<div onclick="canviaIframe('https://www.openai.com')">Pàgina 2.2</div>
</div>
</div>
<div>
Formulari
<div class="menu-nivell-2">
<div onclick="canviaIframe('https://ilecina.inscastellbisbal.net/wp-content/uploads/2025/05/formulari2.html')">formulari POST</div>
</div>
</div>
</div>
</nav>
<iframe id="contingut" src="about:blank"></iframe>
<script>
function canviaIframe(url) {
document.getElementById('contingut').src = url;
}
</script>
</body>
</html>
window.addEventListener('DOMContentLoaded', () => {
const iframe = document.getElementById('contingut');
if (iframe) {
iframe.addEventListener('load', () => {
console.log("carregat");
console.log("URL assignada:", iframe.src);
});
} else {
console.warn("No s'ha trobat l'iframe amb id 'contingut'");
}
});<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8" />
<title>Formulari i Llista d'Usuaris</title>
</head>
<body>
<h2>Envia les teves dades</h2>
<form id="formulari">
<label for="nom">Nom:</label><br>
<input type="text" id="nom" name="nom" required /><br /><br />
<label for="correu">Correu electrònic:</label><br>
<input type="email" id="correu" name="correu" required /><br /><br />
<button type="submit">Enviar</button>
</form>
<p id="resposta"></p>
<h2>Llista d'usuaris</h2>
<table border="1" id="taula-usuaris">
<tr>
<th>Nom</th>
<th>Correu</th>
</tr>
{% for usuari in usuaris %}
<tr>
<td>{{ usuari.nom }}</td>
<td>{{ usuari.correu }}</td>
</tr>
{% endfor %}
</table>
<script src="formulari.js"></script>
</body>
</html>document.getElementById('formulari').addEventListener('submit', function (e) {
e.preventDefault();
const nom = document.getElementById('nom').value;
const correu = document.getElementById('correu').value;
fetch('http://172.24.199.61:5000/rebre-dades', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({ nom, correu }),
})
.then(response => {
if (!response.ok) throw new Error("Error del servidor");
return response.json();
})
.then(data => {
document.getElementById('resposta').innerText = data.missatge;
const taula = document.getElementById('taula-usuaris');
const fila = document.createElement('tr');
const tdNom = document.createElement('td');
const tdCorreu = document.createElement('td');
tdNom.textContent = nom;
tdCorreu.textContent = correu;
fila.appendChild(tdNom);
fila.appendChild(tdCorreu);
taula.appendChild(fila);
document.getElementById('formulari').reset();
})
.catch(error => {
document.getElementById('resposta').innerText = "Hi ha hagut un error en l'enviament.";
console.error(error);
});
});
from flask import Flask, request, jsonify, send_from_directory
import mysql.connector
from flask_cors import CORS
app = Flask(__name__)
CORS(app, resources={r"/*": {"origins": "*"}})
db_host = 'localhost'
db_user = 'usuari'
db_password = '1234'
db_name = 'basedades'
def obtenir_connexio():
try:
connexio = mysql.connector.connect(
host=db_host,
user=db_user,
password=db_password,
database=db_name
)
return connexio
except mysql.connector.Error as error:
print(f"Error en la connexió: {error}")
return None
@app.route('/')
def index():
connexio = obtenir_connexio()
if not connexio:
return "No es pot connectar a la base de dades", 500
cursor = connexio.cursor(dictionary=True)
cursor.execute("SELECT nom, correu FROM usuaris")
usuaris = cursor.fetchall()
cursor.close()
connexio.close()
return send_from_directory('a','formulari.html')
@app.route('/rebre-dades', methods=['POST'])
def rebre_dades():
dades = request.get_json()
nom = dades.get('nom')
correu = dades.get('correu')
if not nom or not correu:
return jsonify({'error': 'Falten dades'}), 400
connexio = obtenir_connexio()
if connexio:
cursor = connexio.cursor()
try:
consulta = "INSERT INTO usuaris (nom, correu) VALUES (%s, %s)"
cursor.execute(consulta, (nom, correu))
connexio.commit()
return jsonify({'missatge': 'Dades desades correctament'}), 200
except mysql.connector.Error as error:
return jsonify({'error': 'Error al guardar les dades'}), 500
finally:
cursor.close()
connexio.close()
else:
return jsonify({'error': 'No s\'ha pogut connectar a la base de dades'}), 500
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')CREATE USER 'usuari'@'localhost' IDENTIFIED BY '1234';
CREATE DATABASE basedades;
GRANT ALL PRIVILEGES ON basedades.* TO 'usuari'@'localhost';
FLUSH PRIVILEGES;
//per veure la taula amb la informacio recopilada:
USE basedades;
CREATE TABLE usuaris (
id INT AUTO_INCREMENT PRIMARY KEY,
nom VARCHAR(100),
correu VARCHAR(100),
);
SELECT * FROM usuaris;