点击一个链接打开一个新的页面时,传递一个id给新的页面,在新的页面接受id,并且获取和此id相关联的json文件渲染页面
1.先写一个方法打开新的页面并传递id
//跳转页面函数
function toInfo(num, id) {
const content = document.querySelectorAll('.item-content')
for (var i = 0; i < content.length; i++) {
content[num].addEventListener('click', function() {
//获取点击的数据的id
// window.location.href = "info.html?id=" + id
window.open("info.html?id=" + id[num]) //打开新窗口
})
}
}
其中的id 和 num 是在获取本页面数据时的id数据获取页面代码如下:
// 切换页面内容函数
function getdata(num) {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
if (num === 1) {
xhr.open("GET", "http://127.0.0.1:8000?page=" + num, true)
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
let datas = JSON.parse(xhr.response)
let data = datas.letters
toOther = []
for (var i = 0; i < data.length; i++) {
$(".item-content")[i].innerHTML = data[i].content
$(".item-sender")[i].innerHTML = data[i].sender
$(".item-lastTime")[i].innerHTML = data[i].lastTime
let dataId = data[i].letterId
toOther.push(dataId)
toInfo(i, toOther)
}
}
}
}
} else {
xhr.open("GET", "http://127.0.0.1:8000/page" + num, true)
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
let datas = JSON.parse(xhr.response)
let data = datas.letters
toOther = []
for (var i = 0; i < data.length; i++) {
$(".item-content")[i].innerHTML = data[i].content
$(".item-sender")[i].innerHTML = data[i].sender
$(".item-lastTime")[i].innerHTML = data[i].lastTime
let dataId = data[i].letterId
toOther.push(dataId)
toInfo(i, toOther)
}
}
}
}
}
}
在写好的路由规则获取数据,将整个页面获取的数据中的每个链接的id收集并存入toOther数组中,在获取完数据后,调用toinfo(i, toOther)方法,并把参数传入函数中,实现打开新的页面后将id传到新的页面
这样就成功将id传到新的页面了
2.在新的页面js代码,获取传来的id
//获取上个页面传来的数据
function getdata() {
var url = location.search; //获取url中"?"符后的字串,如"?p=1"
var theRequest = new Object(); //创建一个对象存储传来的数据
if (url.indexOf("?") != -1) { //判断是否传来数据
var str = url.substr(1); //去除?
strs = str.split("&"); //以&分隔字符串 获取有几个数据传来
for (var i = 0; i < strs.length; i++) {
//以键值对形式将数据存入theRequest对象
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest; //返回对象
}
方法就是使用location.search获取之后进行删减,代码不一一解释
这样就成功获取到id,
3.然后写一个请求将id传入路由规则,在路由规则里判断本地与id相关的json文件,请求并响应回页面,并渲染
//获取上个页面传来的id存入变量
var pageId = getdata().id
function firstpage(pageId) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "http://127.0.0.1:8000/info?id=" + pageId, true)
xmlhttp.send()
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4) {
if (xmlhttp.status >= 200 && xmlhttp.status < 300) {
let datas = JSON.parse(xmlhttp.response)
let data = datas.letter
let repdata = data.replys[0]
console.log(data);
$('.title')[0].innerHTML = data.title
$('.sender')[0].innerHTML = data.sender
$('.postTime')[0].innerHTML = data.postTime
$('.content')[0].innerHTML = data.content
$('.repcontent')[0].innerHTML = repdata.repContent
$('.reptime')[0].innerHTML = repdata.repTime
// $('.repplace')[0].innerHTML = repdata.repTime
}
}
}
}
和前面一样使用url传参的方式url?id = xxx,把id传入路由规则
xmlhttp.open("GET", "http://127.0.0.1:8000/info?id=" + pageId, true)
之后写好路由规则
//info页面的获取
app.get('/info', (req, res) => {
res.setHeader('Access-Control-Allow-Origin', '*')
var id = req.query.id
res.sendFile(__dirname + '/public/data/detail' + id + '.json')
})
使用req.query.id的方式获取传来的id,在将相关的json文件返回
req.query.id(id是你传参是设置的名字)
这样就成功准确获取到上个页面传来的id并获取到新页面的数据,然后渲染页面
如果正在写类似代码的,某个地方方法不知道的,会很有帮助
详细项目请见: