当前位置: 首页 > news >正文

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

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

一、前端直接传递参数

  • 1、URL 参数传递(query string):通过 URL 的查询字符串(即问号后面的参数)将参数传递给页面。可以通过location.searchURLSearchParams对象来获取和解析参数。
// 发送参数
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 的localStoragesessionStorage来在浏览器中存储数据。可以通过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();

 

相关文章:

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

Web 页面之间传递参数的方法有很多种&#xff0c;下面列出一些常见的方法以及它们的代码示例。 一、前端直接传递参数 1、URL 参数传递&#xff08;query string&#xff09;&#xff1a;通过 URL 的查询字符串&#xff08;即问号后面的参数&#xff09;将参数传递给页面。可…...

Android实例仿真之二

目录 三 从无入手 第一阶段 第二阶段 第三阶段 第四阶段 第五阶段 第六阶段 第七阶段 八 举两个典型例子&#xff1a; 九 逆向工程 三 从无入手 这节标题叫从无入手&#xff0c;什么意思呢&#xff1f;如果没有Android这个实例存在&#xff0c;你要做一个类似Android…...

day47【代码随想录】动态规划之买卖股票的最佳时机III、买卖股票的最佳时机IV、最佳买卖股票时机含冷冻期、买卖股票的最佳时机含手续费

文章目录前言一、买卖股票的最佳时机III&#xff08;力扣123&#xff09;二、买卖股票的最佳时机IV&#xff08;力扣188&#xff09;三、最佳买卖股票时机含冷冻期&#xff08;力扣309&#xff09;四、买卖股票的最佳时机含手续费&#xff08;力扣714&#xff09;股票买卖问题总…...

网络数据包接收流程

1. 网络数据包接收流程简述 典型的以太网卡网络包接收流程如下&#xff1a; 1.网络包通过物理介质传到接收端的phy芯片&#xff1b; 2.phy芯片通过RGMII协议传到MAC芯片rx queue fifo中&#xff1b; 3.MAC芯片通过专用DMA将网络包搬运到网卡驱动程序预先分配好的rx ringbuffer中…...

CSAPP学习笔记——虚拟内存(二)

案例研究 Intel Core i7 该处理底层的Haswell微体系结构允许64位的虚拟和物理地址空间&#xff0c;而现在的Core i7实现支持48位&#xff08;256TB&#xff09;虚拟地址空间和52位&#xff08;4PB&#xff09;物理地址空间&#xff0c;这对目前来说已经完全够用了。&#xff…...

面试sql

创建表 create table Student ( Sno varchar(20) primary key,Sname varchar(20) UNIQUE,Ssex varchar(2),Sbirthday date,class varchar(20) )create table Course ( Cno varchar(20) primary key,Cname varchar(20) UNIQUE,Tno varchar(20) )create table Score ( …...

Python编程自动化办公案例(2)

作者简介&#xff1a;一名在校计算机学生、每天分享Python的学习经验、和学习笔记。 座右铭&#xff1a;低头赶路&#xff0c;敬事如仪 个人主页&#xff1a;网络豆的主页​​​​​​ 目录 前言 一.前期代码 二.实现批量读取 1.os库 2.实现思路 &#xff08;1&#…...

Vulnhub 渗透练习(七)—— FRISTILEAKS: 1.3

环境搭建 下载链接 virtualbox 打开靶机设置为 host-only&#xff0c;攻击机同样。 具体可点此处 信息收集 开了个 80 端口。 用的是 apache 2.2.15 &#xff0c;这个版本有个解析漏洞。 目录 根据首页的图片猜测 /fristi/ 目录&#xff08;不过我没想到 -_-&#x…...

阶段二10_面向对象高级_分类分包思想和案例环境搭建

一.分类思想 1.分类思想概念&#xff1a; 分工协作&#xff0c;专人干专事 2.信息管理系统分类[案例] Student 类-------------------->标准学生类&#xff0c;封装键盘录入的学生信息&#xff08;id , name , age , birthday&#xff09; StudentDao 类-----------------&…...

关于打印工具print-js的使用

https://www.jianshu.com/p/f6f09dd9f7db第一步 安装组件//安装print-js npm install print-js --save //删除print-js npm uninstall print-js //安装固定版本 npm install print-js版本号 --save // 全局安装 npm install print-js --save -g第二步 引入组件安装成功后&#…...

Doxygen使用

文章目录简介Doxygen的安装Doxygen的配置生成配置文件常用配置Doxygen注释头文件注释:函数的注释:Doxygen文档生成reference简介 Doxygen 是一个流行的用于生产代码文档的工具&#xff0c;关于它的介绍可以参考官网&#xff1a;https://www.doxygen.nl/index.html。 我使用Dox…...

MySQL数据库调优————表结构设计优化

三范式 第一范式 字段具有原子性&#xff0c;即数据库表的每一个字段都是不可分割的原子数据项&#xff0c;不能是集合、数组、记录等非原子数据项当实体中的每个属性有多个值时&#xff0c;必须拆分为不同的属性 第二范式 满足第一范式的基础上&#xff0c;要求每一行数据…...

set对象和map对象

1 Set对象 介绍: Set数据结构类似数组&#xff0c;但所有成员的值唯一。 Set本身为一个构造函数&#xff0c;用来生成 Set数据结构&#xff0c;使用 add方法来添加新成员。 let a new Set(); [1,2,2,1,3,4,5,4,5].forEach(x>a.add(x)); for(let k of a){ console.log(k…...

stream()流的使用

文章目录引入流流的操作中间操作终端操作流的使用谓词筛选筛选各异的元素流的切片截断流跳过元素映射流的扁平化查找和匹配归约元素求和、最大值和最小值数值流构建流由值构建流由数组创建流引入流 java api提供的一种利用声明式的方式处理数据集合的一个东西&#xff0c;可以…...

C++学习笔记-常量

在程序执行过程中&#xff0c;其值不能改变的量称为常量(Constant)。普通常量的类型是根据数据的书写形式来决定的。如 100 是整型常量&#xff0c;0.5 是实型常量&#xff0c;‘q’ 是字符型常量&#xff0c;“qianfeng” 是字符串常量。 常量是固定值&#xff0c;在程序执行期…...

JavaScript系列之实现继承的几种方式

文章の目录一、借助父构造函数继承属性1、实现方式2、优点3、缺点二、原型链继承1、实现方式2、优点3、缺点三、组合继承四、ES6继承的实现方式参考写在最后一、借助父构造函数继承属性 1、实现方式 先定义一个父构造函数(this指向为window)&#xff1b;再定义一个子构造函数…...

java面试准备

1.自我介绍: 2.基础 : 1.集合 : java容器中分为collection 和map两大类 collection 分为list集合(有序且重复的),set集合(无序,不可重复) list集合分为arrayList集合 : 查询快,增删慢,它是基于数组结构的,对数据的增删是在数组的尾部进行添加或删除的,其效率相对于LinkedList…...

kafka-6-python单线程操作kafka

使用Python操作Kafka&#xff1a;KafkaProducer、KafkaConsumer Python kafka-python API的帮助文档 1 kafka tools连接 (1)/usr/local/kafka_2.13-3.4.0/config/server.properties listeners PLAINTEXT://myubuntu:9092 advertised.listenersPLAINTEXT://192.168.1.8:2909…...

【Spring教程】1.Spring概述

1、概述 1.1、Spring是什么&#xff1f; Spring 是一款主流的 Java EE 轻量级开源框架 &#xff0c;Spring 由“Spring 之父”Rod Johnson 提出并创立&#xff0c;其目的是用于简化 Java 企业级应用的开发难度和开发周期。Spring的用途不仅限于服务器端的开发。从简单性、可测…...

设计模式-代理模式

控制和管理访问 玩过扮白脸&#xff0c;扮黑脸的游戏吗&#xff1f;你是一个白脸&#xff0c;提供很好且很友善的服务&#xff0c;但是你不希望每个人都叫你做事&#xff0c;所以找了黑脸控制对你的访问。这就是代理要做的&#xff1a;控制和管理对象。 监视器编码 需求&…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

ffmpeg(四):滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

FOPLP vs CoWoS

以下是 FOPLP&#xff08;Fan-out panel-level packaging 扇出型面板级封装&#xff09;与 CoWoS&#xff08;Chip on Wafer on Substrate&#xff09;两种先进封装技术的详细对比分析&#xff0c;涵盖技术原理、性能、成本、应用场景及市场趋势等维度&#xff1a; 一、技术原…...