页面之间传参之url传参-实现点击携参跳转到详情页

Jioby 发布于2019-08-22 18:22 / 1722人阅读

摘要：概念图实现功能电影列表页数据为动态获取服务器数据点击某个电影后跳转到电影详情页数据为根据点击的参数去服务器请求对应数据回来填充到页面显示给用户效果图电影列表页电影详情页思路及重点电影列表的每一项是从服务器获取数据然后循环输出到页面的点击电影

概念图

实现功能:

电影列表页,数据为动态获取服务器数据,点击某个电影后跳转到电影详情页,数据为根据点击的参数去服务器请求对应数据回来填充到页面显示给用户

效果图 电影列表页

电影详情页

思路及重点

电影列表的每一项是从服务器获取数据然后循环输出到页面的,点击电影列表某一电影时,要传这一项的参数到window.location.href,关键点就是给点击函数一个实参,比如这里的cctz(item.id),item.id就是实参,

在函数的定义里写形参,比如这里的canshu:

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

清单(过程)

1. 电影列表页,ajax获取服务器数据,循环输出到页面

2.写点击事件函数cctz(),当用户点击某个电影时,往cctz()里传入实参item.id,即cctz(item.id),触发js里的cctz函数,

**cctz函数使用open方法操控location.href使得页面跳转,并在href末尾追加参数字符串.**

3.详情页如何取得参数? 是这样:从location.secrch拿到一段来自前一个页面传递的参数字符串,并将这段参数字符串处理成一个键值对的对象obj

4.这时候obj.id就是参数,就取得了参数,再以这个参数去向服务器请求对应的数据.使用jq的ajax请求,以这个obj.id参数去向服务器请求对应的数据,把数据显示到页面

5.在页面中输出数据就行了

代码

//index.html



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

//详情页.html




    
        
        电影详情页
    

    
        
            电影详情页
            
            
            {{ vueData.title }}
            主演: {{ vueData.casts[0].name }} , {{ vueData.casts[1].name }}
            导演: {{ vueData.directors[0].name }}
            简介: {{ vueData.summary }}

云服务器 GPU云服务器页面跳转传参 aspx页面跳转传参 html点击事件传参用于实现传参

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95787.html

(原创)vue传参之通过Vue属性$route的params传参

摘要：传值与传参是两块东西概念图原理传参的原理主要在于也有是的属性是的属性用来储存数据的键值对对象形式储存很多属性键值对属性属性值在里面清单通过浏览器插件开发者工具插件可以看的到属性内部的具体数据可以说于是一个中间容器用来容纳参数是键值对的方式这 vue传值与 vue传参是两块东西概念图 showImg(https://segmentfault.com/img/remote/146000...

30e8336b8229 2019-08-22 18:21 评论0 收藏0
当微信小程序遇上filter~

摘要：具体用法其中表示数组元素的值，表示数组元素的下标，表示包含该元素的数组。这里采用随机函数来获取数组的下标，函数是获取之间的数，函数是向下取整，这样就可以随机获取相应的下标数。小程序中的模板就很好地帮我们解决了这个问题，并通过属性来实现调用。在微信小程序的开发过程中，当你想要实现不同页面间的数据绑定，却为此抓耳饶腮时，不妨让微信小程序与filter 来一场完美的邂逅，相信会给你带来别样...

Darkgel 2019-08-21 18:33 评论0 收藏0
AngularJs功能（九）--路由

摘要：该内的内容会根据路由的变化而变化。配置，用来定义路由规则。由此我们就需要另一个第三方路由模块，叫做，当然它是基于开发的。造成这种现象的最根本原因路由没有明确的父子层级关系。监听路由路由状态发生改变时可以通过监听，通过注入实现状态的管理。何为路由路由机制运可以实现多视图的单页Web应用（single page web application，SPA）。单页应用在使用期间不会重新加载...

mingde 2019-08-22 13:59 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

tommego 2019-08-23 12:55 评论0 收藏0
从头开始学习vue-router

摘要：路由模块的本质就是建立起和页面之间的映射关系。这时候我们可以直接利用传值了使用来匹配路由，然后通过来传递参数跳转对应路由配置于是我们可以获取参数六配置子路由二级路由实际生活中的应用界面，通常由多层嵌套的组件组合而成。一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问...

jhhfft 2019-08-02 11:56 评论0 收藏0