頁面之間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"
        }
    }
]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。