页面传参封装

305 阅读2分钟

「这是我参与2022首次更文挑战的第10天,活动详情查看:2022首次更文挑战

传参

功能理解

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

image.png

开始封装

首先是卡片展示页,我们首先渲染几个卡片做例子,其中渲染的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");
    }

image.png

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

第一部分是协议

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

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

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

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

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

image.png