html 如何传递参数

HTML本身不直接传递参数，但在Web开发中，我们通常使用几种不同的方式来在页面之间或者与服务器之间传递参数，以下是一些常用的方法：

1、URL参数（GET方法）

2、表单提交（POST方法）

3、AJAX请求

4、Web存储（如localStorage和sessionStorage）

5、Cookies

1. URL参数（GET方法）

当我们在浏览器地址栏输入一个URL并访问时，经常可以看到URL后面跟着一些参数，这些就是通过GET方法传递的参数，它们以?开始，多个参数之间用&分隔。

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

在这个例子中，name和age就是传递给page这个页面的参数。

在HTML中，你可以通过JavaScript来获取这些参数：

// 使用URLSearchParams接口解析URL中的查询字符串
const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name'); // 获取name参数的值
const age = urlParams.get('age');  // 获取age参数的值

2. 表单提交（POST方法）

表单是HTML中用于收集用户输入的一种方式，当表单被提交时，数据会被发送到服务器，通常使用POST方法。

HTML表单示例：

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="age">Age:</label>
  <input type="text" id="age" name="age">
  <input type="submit" value="Submit">
</form>

在上面的例子中，当用户填写表单并点击提交按钮后，name和age字段的数据会以POST请求的方式发送到服务器的/submit路径。

3. AJAX请求

AJAX（Asynchronous JavaScript and XML）允许网页异步更新，这意味着可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

使用JavaScript的fetch API发起AJAX请求：

fetch('/api/data', {
  method: 'POST', // 或 'GET'
  headers: {
    'ContentType': 'application/json',
  },
  body: JSON.stringify({
    name: 'John',
    age: 25,
  }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

4. Web存储

Web存储提供了两种对象来存储键值对：localStorage（没有过期时间设置）和sessionStorage（在浏览器窗口关闭后清除）。

// 存储数据
localStorage.setItem('name', 'John');
sessionStorage.setItem('age', '25');
// 获取数据
const name = localStorage.getItem('name');
const age = sessionStorage.getItem('age');

5. Cookies

Cookies是服务器发送到用户浏览器并保存的一小块数据，它们主要用于维护用户的某些状态，比如登录状态。

设置Cookies通常是在服务器端进行的，但也可以借助JavaScript在客户端进行操作：

document.cookie = "name=John; expires=Thu, 18 Dec 2023 12:00:00 UTC";

读取Cookies：

let cookies = document.cookie;
let name = cookies.replace(/(?:(?:^|.*;s*)names*=s*([^;]*).*$)|^.*$/, "$1");

上文归纳

以上介绍了在HTML中传递参数的几种常见方法，每种方法都有其适用场景，开发者需要根据具体需求来选择最合适的传参方式，对于敏感信息，推荐使用POST方法或AJAX请求来避免数据在URL中暴露；而对于非敏感信息且需要 bookmarkable 的页面，则可以使用GET方法，Web存储和Cookies则更多用于在用户的浏览器上持久化存储数据。