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

Question

This is my first page.这是我的第一页。

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

This is my second page.这是我的第二页。

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

MY JAVASCRIPT我的 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();
}

I would like to display my name when typing my name from first page in the customer name label, and when i click submit.我想在客户姓名标签的第一页中输入我的姓名以及单击提交时显示我的姓名。 my second page display my name in the "id=1".我的第二页在“id=1”中显示我的名字。

Answer 1

Ajax and ajax like techniques (fetch etc.) are usually used to either post data to a form or to get data from a url. Ajax 和类似 ajax 的技术（fetch 等）通常用于将数据发布到表单或从 url 获取数据。

To send data from one HTML page to another you would need some kind of database and server side code to capture and store it and later retrive it.要将数据从一个 HTML 页面发送到另一个页面，您需要某种数据库和服务器端代码来捕获和存储它，然后再检索它。

If you just want inputed client side data to persist across pages then look at sessionStorage or localStorage , for example to keep the name we type until we exit the browser or clear session data:如果您只是希望输入的客户端数据跨页面持久化，请查看sessionStorage或localStorage ，例如，在退出浏览器或清除会话数据之前保留我们键入的名称：

First page:第一页：

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

Second page:第二页：

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

Just remember to be careful what you store, and that it's only stored on the frontend/client side.请记住要小心您存储的内容，并且它仅存储在前端/客户端。

如何使用 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