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

概念图

实现功能:

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

效果图

电影列表页

电影详情页

思路及重点

电影列表的每一项是从服务器获取数据然后循环输出到页面的,点击电影列表某一电影时,要传这一项的参数到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 }}

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();

}

})

//详情页.html

电影详情页

电影详情页

{{ vueData.title }}

主演: {{ vueData.casts[0].name }} , {{ vueData.casts[1].name }}

导演: {{ vueData.directors[0].name }}

简介: {{ vueData.summary }}

/*-- 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 --*/