页面之间url传值,传循环数据里的值成功传值成功接收(动态数据传值)

头像
youxiao
    阅读 6 分钟

    参考

    js页面之间传参方式集合
    image.png

    实现思想:window.location

    涉及知识点:escape(),unescape(),split()

    效果图及实现的代码(贴重点):

    传值的页面(实战传参.html):

    image.png

    image.png

    image.png

    接收的页面(实战详情页1.html):

    image.png

    image.png

    代码

    //实战传参.html

    <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>

        <h1>商品页</h1>
        <hr />
        
        
            <div id="app">
                <div v-for="item in myData" @click="cctz(item.desc)">
                    <p>手机型号: {{ item.desc }}</p>
                    <p>这个手机的系统是: {{ item.ua }}</p>
                    <p>供应商:{{item.expect.vendor}}</p>
                    <p>手机特色卖的:{{item.expect.model}}</p>
                    <p>手机类型:{{item.expect.type}}</p>
                    <hr />
                </div>
            </div>
        

        <script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            
            new Vue({
                el: '#app',
                data: {
                    msg: 'hsaljfl',
                    myData: '',
                    url: '实战详情页1.html?'
                },
                methods: {
                    getData() { //定义一个函数getData() , 里面放置$ajax方法
                        let self = this;

                        //从服务器拿数据回本地
                        $.ajax({
                            type: "GET", //GET还是POST,不是必须
                            url: "data.json",
                            // dataType: "json",//要求服务端返回的数据类型,不是必须
                            //async: true,//同步还是异步,不是必须
                            success: function(data) {
                                console.log(data);
                                //将拿到的数据赋值给vue实例的数据里的变量
                                self.myData = data;
                            }
                        });

                    },
                    
                    cctz (canshu) { //canshu是形参,在实际调用里实参是cctz(item.desc)里的item.desc
                        // escape将字符串转化成编码格式,接收页面倒是后再转回来
                        var url = '实战详情页1.html?' + 'desc=' + escape(canshu);
                        window.open(url);
                    }
                },
                created: function() { //vue的生命周期函数 , 里面执行函数getData()
                    this.getData();
                }
            })
        </script>

    </body>

</html>

    //实战详情页1.html

    <html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p>如何接收?</p>
        <p>通过window.location.seach接收</p>
        <div id="div1">
        </div>
        
        <p>传的参数key是desc, value是:</p>
        <h2 id='desc'></h2>
        
        <script type="text/javascript">
            
            

                var url=location.search,obj={};

                if(url.indexOf("?")!=-1){

                　　var str = url.substr(1)

                　　strs= str.split("&");

                　　for(var i=0;i<strs.length;i++){

                　　 　 obj[strs[i].split("=")[0]]=unescape(strs[ i].split("=")[1]);

                　　}

                }

                console.log(obj.desc);

                document.getElementById('desc').innerHTML = obj.desc;


            
        </script>

    </body>

</html>

    //data.json

    [{
        "desc": "Asus Nexus 7",
        "ua": "Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.99 Safari/537.36",
        "expect": {
            "vendor": "Asus",
            "model": "Nexus 7",
            "type": "tablet"
        }
    },
    {
        "desc": "Asus Padfone",
        "ua": "Mozilla/5.0 (Linux; Android 4.1.1; PadFone 2 Build/JRO03L) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.117 Safari/537.36",
        "expect": {
            "vendor": "Asus",
            "model": "PadFone",
            "type": "tablet"
        }
    },
    {
        "desc": "Desktop (IE11 with Tablet string)",
        "ua": "Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Tablet PC 2.0; GWX:MANAGED; rv:11.0) like Gecko",
        "expect": {
            "vendor": "undefined",
            "model": "undefined",
            "type": "undefined"
        }
    },
    {
        "desc": "HTC Evo Shift 4G",
        "ua": "Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Sprint APA7373KT Build/GRJ22) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0",
        "expect": {
            "vendor": "HTC",
            "model": "Evo Shift 4G",
            "type": "mobile"
        }
    },
    {
        "desc": "HTC Nexus 9",
        "ua": "Mozilla/5.0 (Linux; Android 5.0; Nexus 9 Build/LRX21R) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Mobile Crosswalk/7.36.154.13 Safari/537.36",
        "expect": {
            "vendor": "HTC",
            "model": "Nexus 9",
            "type": "tablet"
        }
    },
    {
        "desc": "Huawei Honor",
        "ua": "Mozilla/5.0 (Linux; U; Android 2.3; xx-xx; U8860 Build/HuaweiU8860) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1",
        "expect": {
            "vendor": "Huawei",
            "model": "U8860",
            "type": "mobile"
        }
    }
]
    javascript
    youxiao
    27 声望4 粉丝

    前端

    « 上一篇
    JavaScript中的form对象及form对象中的表单元素的访问方法
    下一篇 »
    页面之间传参之url传参-实现点击携参跳转到详情页

    引用和评论

    推荐阅读
    头像
    页面之间传参之url传参-实现点击携参跳转到详情页

    youxiao赞 3阅读 16.3k评论 1

    头像
    如何在仓库中添加只对自己生效的.gitignore规则？

    热饭班长赞 4阅读 2.2k

    头像
    浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析

    chokcoco赞 5阅读 942

    头像
    不要再这样编写 async/await

    王大冶赞 7阅读 1.4k

    头像
    EventLoop事件循环机制(浏览器和Node EventLoop)

    大卫talk赞 6阅读 2.4k

    头像
    静态NodeList 和 动态NodeList的区别

    Change赞 5阅读 5.2k评论 2

    头像
    JavaScript&ES6----数组去重的多种方法

    云绮棠兮赞 4阅读 3.4k评论 2

    0 条评论
    得票最新