jquery.ajax实现点击数据,传数据到另一个页面

一、ajax实现点击传值

1.点击进行跳转的页面,html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   
    <ul></ul>
</body>
<script src="./jquery-3.6.0.js"></script>
<script>

    $.ajax({
        type:"get",
        url:"list.json",
        success:function(respons){
            // console.log(respons)
            $.each(respons.result.data,function(i,e){
                $("<li οnclick='go(this)' hashId="+e.hashId+"></li>").html('<p>'+e.content+'</p><p>'+e.updatetime+'</p><p>'+e.hashId+'</p>').appendTo($("ul"));
        })					
        },
        error:function(){
            console.log(123);
        }
    })
    function go(t){
        // console.log(e.target);
        // $(t).index();
        window.open("07新页面.html?hashId="+$(t).attr("hashId"));
        // window.open("07新页面.html?obj=");
    }
</script>
</html>

2.页面加载的数据,json文件

list.json

{
    "error_code": 0,
    "reason": "Success",
    "result": {
        "data": [
            {
                "content": "有一天晚上我俩一起吃西瓜,老大把西瓜籽很整洁的吐在了一张纸上,\r\n过了几天,我从教室回但宿舍看到老大在磕瓜子,\r\n我就问他:老大,你什么时候买的瓜子?\r\n老大说:刚晒好,说着抓了一把要递给我……",
                "hashId": "bcc5fdc2fb6efc6db33fa242474f108a",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": ""我女朋友气跑了"\r\n"怎么回事?严重吗?你怎么着她了?"\r\n"不严重,我只是很久没用了"",
                "hashId": "03a6095c18e1d6fe7e2c19b2a20d03d1",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "还说神马来一场说走就走的旅行,\r\n工作后就连一场说走就走的下班都不行。",
                "hashId": "10edf75c1e7d0933c91f0f39a28a2c84",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "高速路上堵车,路边葡萄地里有一哥们竟然在偷葡萄,心想太没素质了吧!\r\n不管了我也去,刚溜进葡萄地,那哥们竟问我干嘛,\r\n我撇了一眼反问道你干嘛呢?\r\n那哥们答道摘葡萄呢!\r\n我答道:我也摘葡萄呢!\r\n哥们郁闷了说我摘我家的你呢?\r\n我顿时脸红,哥你家葡萄咋卖呢?",
                "hashId": "bb572bb5b4844badb31012983f7324f5",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "和老婆在街边散步,我手上捏着一张已揉成一团的传单,\r\n走了好一会终于看到个垃圾桶,我赶紧跑过去想扔掉,\r\n没想到老婆从后边一把拉住我说:老公,那个肯定吃不得了,别捡。\r\n我一愣,发现垃圾桶顶盖上放着半个西瓜。",
                "hashId": "7ebccd3bbfaf24e010f9eb3ee68234bd",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "某考生考了个倒数第一,回到家被他爸一顿暴揍,\r\n来到学校老师让他谈谈落后的体会,\r\n学生:“我终于明白了“落后就要挨打”的道理。”",
                "hashId": "4aee2aa6a79c67682f605c4146a8eca4",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "很多人不喜欢朝九晚五的生活,然后开始创业。\r\n最终,他的生活变成了朝五晚九。",
                "hashId": "7b358c4b96cf4a8d82b85545ea8f9603",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "钱这个东西,真是害人精。\r\n小到人与人之间的矛盾,大到国家之间的战争,无不是为了钱。\r\n钱可以把人推上万众瞩目之颠,也可以使人瞬间变成阶下囚。\r\n可是,富人们却没认识到,当钱几辈子花不完时,\r\n挣再多已经没有意义,还不如早日尽点社会责任,\r\n捐助给需要的人,求得个平安幸福。\r\n看到这个的有钱人们呐,你们什么时侯能捐我点啊!",
                "hashId": "94e18075f8c9c8211dfed5f8d6a62983",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "看到一句很好的名言:我们无法拉伸生命的长度,但是我们可以拓展生命的宽度。\r\n我觉得这句话太有道理了!\r\n意思就是:虽然我们无法再长高了,但是我们还可以继续长胖。",
                "hashId": "fd8e364a4c70d46e77c1610879748a9a",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            },
            {
                "content": "女生口中所说的“理工男好萌好棒好想嫁!”,\r\n其实理工男是指“会修电脑、会设置手机、会安家用电器、\r\n会帮做PPT打EXCEL表PS修图、话少、高冷、专一、不和乱七八糟的女生来往、\r\n不爱打扮却又干净清爽、高高瘦瘦、手指纤长、戴黑框眼镜超好看的帅哥”。\r\n其实找个帅哥让他学电脑,再戴个眼镜就OK了。",
                "hashId": "5001c08a3cc8a281b15c467bc15a4911",
                "unixtime": 1418814837,
                "updatetime": "2014-12-17 19:13:57"
            }
        ]
    }
}

3、传值进来的页面

07新页面.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul></ul>
    <p id="title"></p>
    <script src="./jquery-3.6.0.js"></script>
    <script>
        function getUrlParam(name,param){
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
            var r=param.substr(1).match(reg);
            if(r!=null) return unescape(r[2]);
            return null;
        }
        // console.log(getUrlParam("id",window.location.search));
        // title.innerHTML=getUrlParam("hashId",window.location.search)
        var hashId=getUrlParam("hashId",window.location.search);

        $.ajax({
        type:"get",
        url:"list.json",
        success:function(respons){
            console.log(respons.result.data)

            $.each(respons.result.data,function(i,e){
                if(e.hashId==hashId){
                    
                    console.log(123);
                    $("<li></li>").html('<p>'+e.content+'</p><p>'+e.unixtime+'</p><p>'+e.updatetime+'</p>').appendTo($("ul"));
                    return null;
                }
                
        })					
        },
        error:function(){
            console.log(123);
        }
        })
        
    

   
    </script>
</body>
</html>

4.最后,实现效果

在这里插入图片描述

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

小兔崽啊啊啊

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值