1、在前端请求ajax的时候会遇到跨域的问题，不能够请求到数据，需要搭建一下中间层，使用express来请求ajax数据然后前端再去请求后台返回的数据，这样就不会遇到跨域问题，express代码如下：
var express=require('express');
var router=express.Router();
var http=require('http');//引入http模块
//后台解决跨域问题
router.all('*',function(req,res,next) {
res.header("Access-Control-Allow-Origin","*");
res.header('Access-Control-Allow-Methods','PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers","X-Requested-With");
res.header('Access-Control-Allow-Headers','Content-Type');
next();
});
// 轮播的接口
// localhost:3000/lunbo
router.get('/lunbo',function(req,res) {
varpage=req.query.page;
varcount=req.query.count;
// 要去请求 卖座网的接口
// http://m.maizuo.com/v4/api/billboard/home?__t=1500253189212
vartime=newDate().getTime();
http.get('http://m.maizuo.com/v4/api/billboard/home?__t='+time,function(response) {
vardata='';
response.on('data',function(chunk) {
data+=chunk;
})
response.on('end',function() {
res.send(data);
})
})
})
2、上拉刷新的请求的ajax不能够每次自动加1的操作，后来做了监听滚动事件的函数，在生命周期里面进行加1操作后在滚动的时候再次请求ajax，当滚动的高度和当前页面高度进行对比时候在去请求。代码如下：
componentDidMount() {
window.addEventListener('scroll',this.handleScroll);
// var page = this.props.page
varthat=this;
$.get('http://localhost:8080/come_play?page='+page+'&count=7',function(res) {
if(res) {
vardata=JSON.parse(res).data.films;
that.props.getComeplay(data);
page++;
}
})
}
//获取滚动数据
handleScroll=()=>{
console.log(flag)
varlist=this.props.come_play;//获取state的数据
varfilmes=[];//用来接收新的数据
varthat=this;//改变一下this指向
vartop=(document.documentElement.scrollTop||document.body.scrollTop)+50;//页面的滚动
console.log(top)
varheight=document.documentElement.clientHeight;
varnowheight=200+height*(page-3);
console.log(nowheight)
// console.log(height)
if(top>nowheight&&flag) {
flag=false;
$.get('http://localhost:8080/come_play?page='+page+'&count=7',function(res) {
if(res) {
vardata=JSON.parse(res).data.films;
varfilme=list.concat(data);
varset=newSet(filme);
filmes=newArray(...set);//数组去重
that.props.getComeplay(filmes);
flag=true;
}else{
flag=false;
}
})
page++;//页数+1
}else{
flag=true;
}
}
//销毁时
componentWillUnmount() {
window.removeEventListener('scroll',this.handleScroll);
}
网友评论