页面传参封装

简介: 在含有图文详情的项目中,页面传参是我们必须要使用的,因为我们在第二个页面中获取图文数据是需要数据的,这个数据来源于第一个页面,而我们无法直接从一个页面拿到另一个页面的数据,这个时候就需要用到页面传参来解决这个问题。

传参

功能理解

在含有图文详情的项目中,页面传参是我们必须要使用的,因为我们在第二个页面中获取图文数据是需要数据的,这个数据来源于第一个页面,而我们无法直接从一个页面拿到另一个页面的数据,这个时候就需要用到页面传参来解决这个问题。

1.webp.jpg

开始封装

首先是卡片展示页,我们首先渲染几个卡片做例子,其中渲染的dom结构中的jump函数为跳转函数,参数为要传到第二个页面的数据

function genDom() {
        var works = $(".works");
        for (var i = 0; i < 60; i++) {
            works.append('<div class="work" onclick="jump(' + i + ');"></div>');
        }
    }
genDom();
复制代码

其次封装跳转函数,使用window对象提供的open方法,其中第一个参数为跳转的链接,第二个参数为跳转的形式,这里是创建新的页面

function jump(id) {
        window.open("./bbb.html?id=" + id, "_blank");
    }
复制代码

1.webp.jpg

而我们第二个页面的主要就是需要去接受我们传过来的参数 我们先了解一下我们网页的url组成 我们的页面由三部分组成:

第一部分是协议

第二部分是存有该资源的主机IP地址

第三部分是主机资源的具体地址

而我们传递的参数就是在地址后通过?拼接

var id = location.href.split('=')[1];
document.write("<h1>作品id为" + id + "</h1>");
复制代码

这里我们使用了split来对字符串进行匹配切割,其切割返回值为数组,一般匹配到对应的规则来切割成几个项,最后拿到我们的id,其中我们调用浏览器对象模型location.href来获取我们页面的url,获取到数据之后我们就可以通过发送请求来获取到我们所需要的数据啦!

1.webp.jpg


目录
打赏
0
0
1
0
69
分享
相关文章
AJAX响应状态
【10月更文挑战第29天】了解和正确处理各种AJAX响应状态码是开发高效、稳定的Web应用程序的重要环节。通过对不同状态码的判断和相应处理,可以为用户提供更好的交互体验,确保应用程序在各种情况下都能正确地响应用户的操作。
在配置 Gitee 时需要注意什么?
通过注意以上这些方面,可以更好地配置Gitee,保障项目的代码管理安全、高效、有序,为团队的协作开发和代码上线流程提供有力的支持。
微服务架构
微服务架构
170 2
R语言EG(Engle-Granger)两步法协整检验、RESET、格兰杰因果检验、VAR模型分析CPI和PPI时间序列关系
R语言EG(Engle-Granger)两步法协整检验、RESET、格兰杰因果检验、VAR模型分析CPI和PPI时间序列关系
linux yum下载离线包缓存 安装到服务器 实测!!!
linux yum下载离线包缓存 安装到服务器 实测!!!
239 0
大数据问题排查系列 - 因HIVE 中元数据与HDFS中实际的数据不一致引起的问题的修复
大数据问题排查系列 - 因HIVE 中元数据与HDFS中实际的数据不一致引起的问题的修复
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问