如何在html中传递数据

在HTML中传递数据，通常使用表单（form）和超链接（a标签）。表单通过input标签收集用户输入，提交后将数据发送到服务器。超链接可以通过URL参数传递数据。

如何在HTML中传递数据

在Web开发中，我们经常需要在HTML页面之间传递数据，以下是几种常用的方法：

1. URL参数

通过在URL中附加查询字符串来传递数据，查询字符串以?开头，后面跟着键值对，键和值之间用=连接，多个键值对之间用&分隔。

https://example.com/page.html?name=John&age=30

在接收数据的页面中，可以使用JavaScript解析URL参数：

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return decodeURIComponent(r[2]);
    return null;
}
var name = getQueryString("name");
var age = getQueryString("age");

2. 表单提交

使用HTML的

标签创建一个表单，将数据作为表单字段提交到服务器。

在服务器端，可以处理提交的数据并返回新的HTML页面。

3. AJAX请求

使用JavaScript的XMLHttpRequest或Fetch API发起异步请求，将数据发送到服务器并获取响应。

fetch("/get_data", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "John", age: 30 })
})
    .then(response => response.json())
    .then(data => {
        // 处理返回的数据
    });

4. Web存储（LocalStorage）

使用浏览器的本地存储功能（如localStorage）在同源页面之间共享数据。

// 存储数据
localStorage.setItem("name", "John");
localStorage.setItem("age", "30");
// 读取数据
var name = localStorage.getItem("name");
var age = localStorage.getItem("age");