<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flask Web Interface</title> </head> <body> <h1>Flask Web Interface</h1> <button id="sendButton">Send Data to Server</button> <p id="response"></p> <script> document.getElementById("sendButton").addEventListener("click", function() { // Send data to server fetch('/send_data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({data: 'Data from client'}), }) .then(response => response.json()) .then(data => { // Handle response from server document.getElementById("response").innerHTML = data.message; }) .catch(error => { console.error('Error:', error); }); }); </script> </body> </html>