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

时间 2019-11-10

标签页面之间 url 循环数据成功接收动态据传栏目 HTTP/TCP 繁體版

原文原文链接

参考

js页面之间传参方式集合
javascript

实现思想:window.location

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

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

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

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

代码

//实战传参.htmlhtml

<!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.htmlvue

<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.jsonjava

[{
        "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"
        }
    }
]