国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/頁面之間傳參之url傳參-實現(xiàn)點擊攜參跳轉(zhuǎn)到詳情頁

頁面之間傳參之url傳參-實現(xiàn)點擊攜參跳轉(zhuǎn)到詳情頁

Jioby 發(fā)布于2019-08-22 18:22 / 1759人閱讀

摘要：概念圖實現(xiàn)功能電影列表頁數(shù)據(jù)為動態(tài)獲取服務(wù)器數(shù)據(jù)點擊某個電影后跳轉(zhuǎn)到電影詳情頁數(shù)據(jù)為根據(jù)點擊的參數(shù)去服務(wù)器請求對應(yīng)數(shù)據(jù)回來填充到頁面顯示給用戶效果圖電影列表頁電影詳情頁思路及重點電影列表的每一項是從服務(wù)器獲取數(shù)據(jù)然后循環(huán)輸出到頁面的點擊電影

概念圖

實現(xiàn)功能:

電影列表頁,數(shù)據(jù)為動態(tài)獲取服務(wù)器數(shù)據(jù),點擊某個電影后跳轉(zhuǎn)到電影詳情頁,數(shù)據(jù)為根據(jù)點擊的參數(shù)去服務(wù)器請求對應(yīng)數(shù)據(jù)回來填充到頁面顯示給用戶

效果圖 電影列表頁

電影詳情頁

思路及重點

電影列表的每一項是從服務(wù)器獲取數(shù)據(jù)然后循環(huán)輸出到頁面的,點擊電影列表某一電影時,要傳這一項的參數(shù)到window.location.href,關(guān)鍵點就是給點擊函數(shù)一個實參,比如這里的cctz(item.id),item.id就是實參,

在函數(shù)的定義里寫形參,比如這里的canshu:

cctz?(canshu)?{?
????var?url?=?"詳情頁.html"?+?"?id="?+?escape(canshu);
????window.open(url);
}

清單(過程)

1. 電影列表頁,ajax獲取服務(wù)器數(shù)據(jù),循環(huán)輸出到頁面

2.寫點擊事件函數(shù)cctz(),當(dāng)用戶點擊某個電影時,往cctz()里傳入實參item.id,即cctz(item.id),觸發(fā)js里的cctz函數(shù),

**cctz函數(shù)使用open方法操控location.href使得頁面跳轉(zhuǎn),并在href末尾追加參數(shù)字符串.**

3.詳情頁如何取得參數(shù)?? 是這樣:從location.secrch拿到一段來自前一個頁面?zhèn)鬟f的參數(shù)字符串,并將這段參數(shù)字符串處理成一個鍵值對的對象obj

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

5.在頁面中輸出數(shù)據(jù)就行了

代碼

//index.html



    
        
        我的電影
        
        
    
    
        
        
            
            我的電影
            
                
                    
                
            
            
            
                
                
                
                    
                    
                        
                    
                    
                    
                        {{ item.title }}
                        {{ item.casts[0].name }}
                        {{ item.casts[1].name }}

//詳情頁.html




    
        
        電影詳情頁
    

    
        
            電影詳情頁
            
            
            {{ vueData.title }}
            主演: {{ vueData.casts[0].name }} , {{ vueData.casts[1].name }}
            導(dǎo)演: {{ vueData.directors[0].name }}
            簡介: {{ vueData.summary }}