Web 页面之间传递参数的几种方法

Web 页面之间传递参数的方法有很多种，下面列出一些常见的方法以及它们的代码示例。

一、前端直接传递参数

• 1、URL 参数传递（query string）：通过 URL 的查询字符串（即问号后面的参数）将参数传递给页面。可以通过location.search或URLSearchParams对象来获取和解析参数。

// 发送参数
const params = {id: 123, name: 'Alice'};
const url = `http://example.com/page?${new URLSearchParams(params)}`;
window.location.href = url;

// 接收参数
const searchParams = new URLSearchParams(window.location.search);
const id = searchParams.get('id');
const name = searchParams.get('name');

2、URL hash传递：通过 URL 的 hash 值来传递参数。例如，

http://example.com/#/page?id=1

可以传递一个名为

id

的参数。可以通过

location.hash

来获取和解析hash值中的参数。

// 发送参数
const id = 123;
window.location.hash = `#id=${id}`;

// 接收参数
const searchParams = new URLSearchParams(window.location.hash.substring(1));
const id = searchParams.get('id');

3、URL 路径传递：通过 URL 的路径参数来传递参数。例如，

/users/:id

可以传递一个名为

id

的参数。可以通过路由框架（如 React Router）来解析路径参数。

// 发送参数
const id = 123;
window.location.href = `http://example.com/page/${id}`;

// 接收参数
const id = parseInt(window.location.pathname.split('/').pop());

4、JavaScript 变量：通过 JavaScript 变量来传递参数。可以在不同的页面之间共享全局变量，或者在一个页面内使用模块化开发来传递参数。

// 发送参数
const id = 123;
window.myGlobalId = id;

// 接收参数
const id = window.myGlobalId;

5、Cookie：通过在浏览器中存储 Cookie 来传递参数。可以通过

document.cookie

来读取和设置 Cookie。

// 发送参数
document.cookie = 'id=123; path=/';

// 接收参数
const cookies = document.cookie.split(';').map(cookie => cookie.trim().split('='));
const id = cookies.find(cookie => cookie[0] === 'id')[1];

6、Web 存储：过 HTML5 的

localStorage

或

sessionStorage

来在浏览器中存储数据。可以通过

localStorage.getItem()

和

localStorage.setItem()

等方法来读取和设置存储的值。

// 发送参数
localStorage.setItem('id', 123);

// 接收参数
const id = localStorage.getItem('id');

7、自定义事件：通过自定义事件来在不同的组件之间传递数据。可以通过

CustomEvent

对象来定义和触发自定义事件，通过

element.dispatchEvent()

方法来触发事件。

// 发送参数
const event = new CustomEvent('myEvent', {detail: {id: 123, name: 'Alice'}});
document.dispatchEvent(event);

// 接收参数
document.addEventListener('myEvent', event => {
  const {id, name} = event.detail;
});

二、后端间接传递参数

• 8、表单提交：过表单的提交将表单中的数据传递给后台服务器或其他页面。可以通过form元素的submit方法或XMLHttpRequest对象来实现表单提交。 <!-- 发送参数 --><form method="POST" action="http://example.com/page"> <input type="text" name="id" value="123"> <input type="text" name="name" value="Alice"> <button type="submit">提交</button></form><!-- 接收参数 --><?php$id = $_POST['id'];$name = $_POST['name'];?>9、WebSocket：通过 WebSocket 协议在浏览器和服务器之间实时传递数据。可以使用 WebSocket API 来建立 WebSocket 连接，并通过WebSocket.send()方法来发送数据。

// 发送参数
const id = 123;
const ws = new WebSocket('ws://example.com');
ws.onopen = () => ws.send(JSON.stringify({id}));

// 接收参数
const ws = new WebSocket('ws://example.com');
ws.onmessage = event => {
  const {id} = JSON.parse(event.data);
};

10、Fetch API：通过 Fetch API 发送 HTTP 请求，并通过请求的 body 传递数据。可以使用

fetch()

方法来发送请求，并通过

body

参数传递数据。

// 发送参数
const params = {id: 123, name: 'Alice'};
fetch('http://example.com/page', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify(params)
});

// 接收参数
const body = await fetch('http://example.com/page').then(res => res.json());
const {id, name} = body;

11、AJAX：通过 XMLHttpRequest 对象发送异步 HTTP 请求，通过请求的参数传递数据。可以通过

XMLHttpRequest.send()

方法发送请求，通过

XMLHttpRequest.onreadystatechange

事件监听请求的状态变化。

// 发送参数
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/page');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
const params = {id: 123, name: 'Alice'};
xhr.send(JSON.stringify(params));

// 接收参数
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/page');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    const {id, name} = JSON.parse(xhr.responseText);
  }
};
xhr.send();