頁面之間傳參之url傳參-實現點擊攜參跳轉到詳情頁

時間 2019-11-10

標籤頁面之間 url 實現點擊轉到詳情欄目 HTTP/TCP 简体版

原文原文鏈接

概念圖

實現功能:

電影列表頁,數據爲動態獲取服務器數據,點擊某個電影后跳轉到電影詳情頁,數據爲根據點擊的參數去服務器請求對應數據回來填充到頁面顯示給用戶javascript

效果圖

電影列表頁

電影詳情頁

思路及重點

電影列表的每一項是從服務器獲取數據而後循環輸出到頁面的,點擊電影列表某一電影時,要傳這一項的參數到window.location.href,關鍵點就是給點擊函數一個實參,好比這裏的cctz(item.id),item.id就是實參,css

在函數的定義裏寫形參,好比這裏的canshu:html

cctz (canshu) { 
    var url = '詳情頁.html' + '?id=' + escape(canshu);
    window.open(url);
}
</pre>

清單(過程)

1. 電影列表頁,ajax獲取服務器數據,循環輸出到頁面vue

2.寫點擊事件函數cctz(),當用戶點擊某個電影時,往cctz()裏傳入實參item.id,即cctz(item.id),觸發js裏的cctz函數,java

**cctz函數使用open方法操控location.href使得頁面跳轉,並在href末尾追加參數字符串.**

3.詳情頁如何取得參數? 是這樣:從location.secrch拿到一段來自前一個頁面傳遞的參數字符串,並將這段參數字符串處理成一個鍵值對的對象objjquery

4.這時候obj.id就是參數,就取得了參數,再以這個參數去向服務器請求對應的數據.使用jq的ajax請求,以這個obj.id參數去向服務器請求對應的數據,把數據顯示到頁面ajax

5.在頁面中輸出數據就好了json

代碼

//index.htmlbootstrap

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>個人電影</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
    </head>
    <body>
        
        <div id="app" class="container">
            
            <div class="myheader"><span id="wangzhangmingzi">個人電影</span></div>
            <div id="caoZuo">
                <div id="tianJiaDianYing">
                    <button type="button" class="btn btn-primary btn-lg">添加電影</button>
                </div>
            </div>
            
            <div class="content">
                
                <!-- 電影卡片 循環輸出start -->
                <div class="dianYingKaPian" v-for="item in myData" @click="cctz( item.id )">
                    <!-- 電影封面 -->
                    <div class="dianYingFengMian">
                        <img :src=" item.images.large "/>
                    </div>
                    <!-- 電影簡介 -->
                    <div class="dianYingJianJie">
                        <h4>{{ item.title }}</h4>
                        <p>{{ item.casts[0].name }}</p>
                        <p>{{ item.casts[1].name }}</p>
                    </div>
                </div>
                <!-- 電影卡片 循環輸出end -->

            </div>
            
        </div>

        <script src="js/vue.min.js"></script>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    msg: 'hsaljfl',
                    myData: '',
                    url: '實戰詳情頁1.html?'
                },
                methods: {
                    getData() { //定義一個函數getData() , 裏面放置$ajax方法
                        let self = this;

                        //從服務器拿數據回本地
                        $.ajax({
                            type: "GET", //GET仍是POST,不是必須
                            url: "https://api.douban.com/v2/movie/top250",
                            dataType: "jsonp",//要求服務端返回的數據類型,不是必須
                            //async: true,//同步仍是異步,不是必須
                            success: function(data) {
                                console.log(data);
                                //將拿到的數據賦值給vue實例的數據裏的變量
                                self.myData = data.subjects;
                                console.log(self.myData);
                            }
                        });

                    },
                    
                    //使用open方法操控location.href使得頁面跳轉,並在href末尾追加參數字符串
                    cctz (canshu) { //canshu是形參,在實際調用裏實參是cctz(item.desc)裏的item.desc
                        // escape將字符串轉化成編碼格式,接收頁面到時候再轉回來
                        var url = '詳情頁.html' + '?id=' + escape(canshu);
                        window.open(url);
                    }
                },
                created: function() { //vue的生命週期函數 , 裏面執行函數getData()
                    this.getData();
                }
            })
        </script>

    </body>
</html>

//詳情頁.htmlapi

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>電影詳情頁</title>
    </head>

    <body>
        <div class="container" style="text-align: center;">
            <h1>電影詳情頁</h1>
            
            <p><img :src="vueData.images.large"/></p>
            <h3>{{ vueData.title }}</h3>
            <p>主演: {{ vueData.casts[0].name }} , {{ vueData.casts[1].name }}</p>
            <p>導演: {{ vueData.directors[0].name }}</p>
            <p>簡介: {{ vueData.summary }}</p>

        </div>

        <script src="js/vue.min.js"></script>
        <script src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            
            /*-- start 從location.secrch拿到一段來自前一個頁面傳遞的參數字符串,
             * 並將這段參數字符串處理成一個鍵值對的對象obj start --*/

            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.id);

            /*-- end --*/


            /*--start 使用vue,在vue裏使用jq的ajax請求數據,把數據顯示到頁面  --*/
            new Vue({
                el: '.container',
                data: {
                    msg: '我是msg',
                    vueData: ''
                },
                methods: {
                    getData() { //定義一個函數getData() , 裏面放置$ajax方法
                        let self = this;

                        /*-- start 拼接url --*/
                        var urlApi = 'https://douban.uieee.com/v2/movie/subject/';
                        var url = urlApi + obj.id;
                        /*-- end --*/

                        /*-- 根據參數從服務器請求數據回本地 --*/
                        $.ajax({
                            type: "GET", //GET仍是POST,不是必須
                            url: url,
                            dataType: "jsonp", //要求服務端返回的數據類型,不是必須
                            //async: true,//同步仍是異步,不是必須
                            success: function(data) {
                                console.log(data);
                                self.vueData = data;
                                console.log('self.vueData是', self.vueData);
                            }
                        });
                        /*-- end --*/

                    }
                },
                created: function() { //vue的生命週期函數 , 裏面執行函數getData()
                    this.getData();
                }
            })
            /*-- end --*/
        </script>

    </body>

</html>

相關標籤/搜索

每日一句

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