Esta es mi primera página.
<!DOCTYPE html> <html> <head> <title>Student List</title> </head> <body> <h1>Customer Form</h1> <form> <div> <label>Customer Name:</label> <input type="text" autofocus id="name"> </div> <br> <div> <label>Address:</label> <input type="text" id="address"> </div> <button type="button" onclick="myFunction()">Submit</button> </form> <!-- JavaScript --> <script type="text/javascript" src="./javascript.js"></script> </body> </html>Esta es mi segunda página.
<!DOCTYPE html> <html> <head> <title>Student List</title> </head> <body> <p id="1"></p> <!-- JavaScript --> </body> </html>MI JAVASCRIPT
function myFunction() { const xhttp = new XMLHttpRequest(); xhttp.onload = function(){ name = document.getElementById('name').value; address = document.getElementById('address').value; document.getElementById("1").innerHTML="<h1>alola="+name+"</h1>"; document.getElementById("2").innerHTML=address; } xhttp.open("GET", name); xhttp.send(); }Me gustaría mostrar mi nombre cuando escribo mi nombre desde la primera página en la etiqueta del nombre del cliente y cuando hago clic en enviar. mi segunda página muestra mi nombre en el "id=1".
Ajax y técnicas similares a ajax (búsqueda, etc.) generalmente se usan para publicar datos en un formulario o para obtener datos de una URL.
Para enviar datos de una página HTML a otra, necesitaría algún tipo de base de datos y código del lado del servidor para capturarlos y almacenarlos y luego recuperarlos.
Si solo desea que los datos ingresados del lado del cliente persistan en las páginas, mire sessionStorage o localStorage , por ejemplo, para mantener el nombre que escribimos hasta que salgamos del navegador o borre los datos de la sesión:
Primera página:
<form> <div> <label>Customer Name:</label> <input type="text" autofocus id="name"> </div> <br> <div> <label>Address:</label> <input type="text" id="address"> </div> <button type="button" onclick="">Submit</button> </form> <script> const name=document.getElementById('name') name.addEventListener("keyup", (e) => { sessionStorage.setItem('uname', name.value); }); </script>Segunda pagina:
<body> <p id="usersName"></p> <script> let userNameElm = document.getElementById('usersName'); userNameElm.innerText = sessionStorage.getItem('uname'); </script> </body>Solo recuerde tener cuidado con lo que almacena, y que solo se almacena en el lado del frontend/cliente.