如何使用 AJAX 将参数从 1 个 HTML 页面传递到另一个 HTML 页面？

Question

这是我的第一页。

<!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>

这是我的第二页。

<!DOCTYPE html>
<html>
<head>
    <title>Student List</title>
</head>
<body>
        
    <p id="1"></p>
        
    <!-- JavaScript -->
</body>
</html>

我的 Java 脚本

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();
}

我想在客户姓名标签的第一页中输入我的姓名以及单击提交时显示我的姓名。 我的第二页在“id=1”中显示我的名字。

Answer 1

Ajax 和类似 ajax 的技术（fetch 等）通常用于将数据发布到表单或从 url 获取数据。

要将数据从一个 HTML 页面发送到另一个页面，您需要某种数据库和服务器端代码来捕获和存储它，然后再检索它。

如果您只是希望输入的客户端数据跨页面持久化，请查看sessionStorage或localStorage ，例如，在退出浏览器或清除会话数据之前保留我们键入的名称：

第一页：

<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>

第二页：

<body>
        
  <p id="usersName"></p>
  <script>
    let userNameElm = document.getElementById('usersName');
    userNameElm.innerText = sessionStorage.getItem('uname');
  </script>   
</body>

请记住要小心您存储的内容，并且它仅存储在前端/客户端。

如何使用 AJAX 将参数从 1 个 HTML 页面传递到另一个 HTML 页面？

问题描述

1 个解决方案

解决方案1
0 2021-11-11 07:28:08

如何使用 AJAX 将参数从 1 个 HTML 页面传递到另一个 HTML 页面？

问题描述

1 个解决方案

解决方案1 0 2021-11-11 07:28:08

解决方案1
0 2021-11-11 07:28:08