express获取url参数传来的值

点击一个链接打开一个新的页面时，传递一个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并获取到新页面的数据，然后渲染页面

如果正在写类似代码的，某个地方方法不知道的，会很有帮助
详细项目请见：