页面传参封装

传参

功能理解

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

开始封装

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

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

第一部分是协议

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

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

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

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

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