前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法

目录

首先了解一下正常传递基本数据类型

JavaScript跳转页面方法

JavaScript路由传递参数

JavaScript路由接收参数传递对象、数组


在前端有的时候会需要用链接进行传递参数,基本数据类型的传递还是比较简单的,但是如果要传递引用数据类型就比较麻烦了,虽然使用sessionStorage或者localStorage也可以实现页面传参,但是如果是多端进行传参就不能够实现了,比如说在pc端的一个页面生成了一个二维码,需要手机端去打开浏览,但是手机进入可能会需要向后台请求数据,这个时候就会用到参数,下面给大家分享一个页面之间传递引用数据类型的方法,这个也是可以实现二维码传参的:


首先了解一下正常传递基本数据类型


跳转传参是指在页面跳转时,将部分数据拼接到URL路径上,一并跳转到另一个页面上,这里要注意拼接,返回的会是字符串的形式:

JavaScript 跳转页面方法

window.location.href = 'http://www.baidu.com'; // 通过改变location.href来实现页面跳转 常用
window.location.replace('http://www.baidu.com'); // 通过location.replace替换当前页面路径来实现页面跳转
window.location.assign('http://www.baidu.com'); // 通过location.assign加载新文档来实现页面跳转

注意区别:


href是在当前页面进行跳转,浏览器的后退按钮还是可以点击的
replace则是将当前页面的路径进行了替换,浏览器的后退按钮不会在生效
使用location.assign()方法传递的URL必须是绝对路径,否则会导致页面无法重定向的情况,而且在IE8以下版本中,如果URL的长度超过了2083个字符,调用location.assign()方法将会失败,在一些浏览器中,如果在页面加载完成后对location.assign()进行调用,可能会导致页面闪烁现象

JavaScript 路由传递参数

使用路由传参可以参考了解浏览器的地址链接,‘?’ 后边的就是参数,多个参数用 ‘&’ 分割

// 单传值
window.location.href = 'http://www.baidu.com?1';
window.location.replace('http://www.baidu.com?1');
window.location.assign('http://www.baidu.com?1');
// 传键值对
window.location.href = 'http://www.baidu.com?id=1';
window.location.replace('http://www.baidu.com?id=1');
window.location.assign('http://www.baidu.com?id=1');
// 多个参数
window.location.href = 'http://www.baidu.com?id=1&value=asdf';
window.location.replace('http://www.baidu.com?id=1&value=asdf');
window.location.assign('http://www.baidu.com?id=1&value=asdf');

这些只是简单的数据类型,如果需要传递引用数据类型或者数据中存在汉字,需要先使用JSON.stringify() 方法将数据进行转换

let str = '张三';
let json_str = JSON.stringify(str);// 转换为json格式
//
window.location.href = encodeURL('http://www.baidu.com?id=1&value=' + json_str);
//
window.location.replace(encodeURL('http://www.baidu.com?id=1&value=' + json_str));
//
window.location.assign(encodeURL('http://www.baidu.com?id=1&value=' + json_str));

wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

JavaScript 路由接收参数 

let str = window.location.search; //获取链接中传递的参数
let params = str.substring(str.indexOf("=") + 1);
dataJson = JSON.parse(decodeURI(params));
console.log("dataJson :", dataJson);// 或者
let data = new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get('id')));
console.log(JSON.parse(data.get('value')));

这里推荐使用第二种方法,更为简便

传递对象、数组

上边已经将方法说明过了,下面的是示例:
页面跳转demo:

let arr = {name: 'zz',sex: '男',age: 11
}
let datajson = JSON.stringify(arr);
// 跳转页面,这里需要大家自己将页面路径进行修改
window.location.href = encodeURI('accept.html?datajson=' + datajson);

接收参数demo:

let dataJson;
let str = window.location.search; //获取链接中传递的参数
let arr = str.substring(str.indexOf("=") + 1);
dataJson = $.parseJSON(decodeURI(arr));
console.log("dataJson :", dataJson);
// 或者let data = new URLSearchParams(window.location.search);
console.log(JSON.parse(data.get('datajson')));

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/216521.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

final,finally,finalize的区别

final,finally,finalize的区别 在Java中,final、finally和finalize是三个不同的关键字,它们具有不同的作用和用法。 1、final: final是一个修饰符,可以用于修饰类、方法和变量。 用于修饰类时&#xff0…

python sort函数

得开个新坑学一下sort的用法了。 a [a, b, c, d] b [0, 1, 2, 3]sorted_list [x for _, x in sorted(zip(b, a))] 参数 sorted(iterable, cmpNone, keyNone, reverseFalse)菜鸟教程的例子: >>>a [5,7,6,3,4,1,2] >>> b sorted(a) #…

如何让弹出的.py文件窗口缩小

原图比例如下,很明显实际大小已经超出屏幕显示范围: 参考这篇文章的代码,新定义一个函数: def get_scaling():user32 windll.user32# 获取现在的尺寸(缩放后now_width user32.GetSystemMetrics(0)now_height user…

Day07 Liunx高级系统设计8-线程

概述 进程与线程 进程 : 系统分配资源的基本单位 , 可以简单理解为一个正在进行的程序 线程 : 操作系统调度的最小单位 , 就是一段代码的执行顺序 注意: 1, 一个进程必须要有一个线程 , 该线程被称为主线程 2, 一个进程可以有多个线程 , 除主线程外的其他线程都是…

我的创作三周年纪念日

今天收到CSDN官方的来信,创作三周纪念日到了。 Dear: Hann Yang ,有幸再次遇见你: 还记得 2020 年 12 月 12 日吗? 你撰写了第 1 篇技术博客: 《vba程序用7重循环来计算24》 在这平凡的一天,你赋予了它…

MacOS 12 开放指定端口 指定ip访问

MacOS 12 开放指定端口 指定ip访问 在 macOS 上开放一个端口,并指定只能特定的 IP 访问,你可以使用 macOS 内置的 pfctl(Packet Filter)工具来实现。 以下是一些基本的步骤: 1、 编辑 pf 配置文件: 打开 /…

Android开发之长log的打印

在开发过程中,我们想要打印长的log,这个时候我们就需要做特殊的处理,下面这段代码就是处理的长log的打印: public static void LogLong(String tag, String msg) { //信息太长,分段打印//因为String的length是字符数量不是字节数…

JavaScript中如何向URL添加参数

设url为https://yungot.com/ 求:向url中添加参数 ?page=1&limit=10 变成 https://yungot.com/?page=1&limit=10 解决方案:调用addUrlParams函数 解:addUrlParams({“page”: 1, “limit”: 10}) // url处理 function getRequestParams() {const requestParams = …

centos7部署docker环境

卸载旧版本 sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine 安装软件包并设置存储库 sudo yum install -y yum-utils sudo yum-config-manager --add-repo https:/…

时光机器:用rrweb打造可回溯的用户体验!

在现代Web应用中,理解用户如何与你的产品互动变得越来越重要。rrweb(record and replay the web)是一个开源库,它能够记录用户在网站上的所有操作,并能够像回放视频一样回放这些操作。这就像给你的网站装上了一台时光机…

leetcode 30. 串联所有单词的子串(优质解法)

代码&#xff1a; class Solution {public static List<Integer> findSubstring(String s, String[] words) {List<Integer> integerListnew ArrayList<>();int lengthwords.length; //words 数组中的字符串个数int sizewords[0].length(); //words 数组…

C++STL的vector模拟实现

文章目录 前言成员变量成员函数构造函数push_backpop_backinserterase析构函数拷贝构造 前言 成员变量 namespace but {template<class T>class vector{public:typedef T* iterator;private:iterator _start;iterator _finish;iterator _end_of_storage;}; }我们之前实…

Docker的安装与简单操作命令

目录 前言 docker的安装 基础docker操作 容器管理 镜像管理 容器镜像封装与加载 前言 前文简单说明了容器技术出现的背景&#xff0c;与对docker做了结构上的介绍Container容器技术简介-CSDN博客https://blog.csdn.net/qq_72569959/article/details/134814887 讲到dock…

研究前沿| Nat Communi:大豆节间距调控基因RIN1的分子机制解析

引言 株型是决定作物产量的重要性状。以半矮秆利用和提高氮肥利用效率为标志的绿色革命提高了作物抗倒伏能力&#xff0c;使水稻、小麦等作物可以通过密植提高单产&#xff0c;产量大幅提升。但是&#xff0c;大豆绿色革命基因尚未发现&#xff0c;与水稻和小麦产量提升相比&am…

Java研学-jdbc(一)

一 概述 1 持久化概述 持久化(persistence): 把内存中的数据保存到可掉电式存储设备 (硬盘、U盘等) 中以供之后使用。   数据持久化是将数据保存到各种关系数据库&#xff0c; 而在 Java中&#xff0c;数据库存取技术只能通过 jdbc 来访问数据库。jdbc 是 Java 语言访问数据…

如何用CHAT了解历史?

问CHAT&#xff1a;古代有什么常见的简单机械&#xff1f; CHAT回复&#xff1a; 1. 滑轮&#xff1a;滑轮是一种简单的机械&#xff0c;主要提供力量放大、改变力的方向等功能。在古代&#xff0c;人们使用滑轮来托起重物&#xff0c;如水井的提水装置&#xff0c;建造大型建…

大模型元年压轴盛会定档12月28日,第十届WAVE SUMMIT即将启航

文章目录 1. 前言2. WAVE SUMMIT五载十届&#xff0c;AI开发者热血正当时3. 酷炫前沿、星河共聚&#xff01;大模型技术生态发展正当时 1. 前言 回望2023年&#xff0c;大语言模型或许将是科技史上最浓墨重彩的一笔。从技术、产业到生态&#xff0c;大语言模型在突飞猛进中加速…

【python中类的介绍】

python中类的介绍 在Python中&#xff0c;定义类需要使用关键字 class类名通常使用大写字母开头&#xff0c;举例&#xff1a; class MyClass:pass解释&#xff1a;定义了一个MyClass的空类。 1、python中类定义 “”" 类中可以定义属性和方法。 1、属性是类的数据成…

使命召唤9缺少buddha.dll的解决方法分享,如何快速修复buddha.dll

《使命召唤》系列作为备受欢迎的第一人称射击游戏,经常会在新作发行后引起广大玩家的讨论。最近&#xff0c;《使命召唤9》玩家中出现了一个常见的技术问题&#xff1a;游戏无法启动&#xff0c;因为系统找不到 buddha.dll 文件。这篇文章将探讨 buddha.dll 的相关信息、丢失原…

软件外包的 20 个问题以及如何避免这些问题

外包很常见。 三分之二的企业进行外包。全国范围内&#xff0c;以某种身份从事自由职业。这意味着全国 40% 的劳动力是个体户或从事零工。 客户支持、软件开发和营销是最常见的外包职能。 外包可以节省成本、提高速度和灵活性。 但这并非没有问题。外包的常见问题最终可能会…