评论：jQuery上拉加载更多  [查看原文]

写的很好，赞一个

up主，问下如果要在前端设置每页显示的数据条数该怎样设置？我这边后台是把数据一次性传过来。

沐枫自然3
2017/12/29 12:46:36

前端的ajax请求后端接口时都要设置参数如：

$.ajax({
    type: 'POST',
    url: 'http://www.xxxxxx.com/index.php',
    data: {
    	user: 'name', 
    	id: 666,
    	page: page,  //page是一个变量，第请求一次会向上加1 
    	num: 10  	 //num是每次要请求返回数据的条数（这里是每次10条，这个可以前端定（不建议），也可以后端定），一般是以数组、或 JSON格式返回的，就像下面的 data.result.list 这样就可以循环出来了。
    	},
    timeout: 60000,
    cache: false,
    beforeSend: function() {
    	//在这里，前端可以做一些加载中。。。。，或 载入中。。。。等等之类的动画。
    },
    dataType: 'JSON',
    contentType: "application/x-www-form-urlencoded;charset=utf-8",   
    async:false,
    success: function(data) {
        if("" != data.result.list) {
            let dom = ""
            for(let i = 0; i < data.result.list.length; i++ ) {
                  dom += '<li>'data.result.list[i].smg'</li>';
            }
            $("#id").append(dom);
            //当每次数据请求完成时,把上面做一些加载中。。。。，或 载入中。。。。等等之类的动画去掉。
        } else {
             console.log("没有数据啦，到底了，别扯啦！");
        }
    }
    });
}

后端以PHP为例:

<?php
	
	$page = intval($_POST['page']);  //每次请求都不一样的如：第一次是1，第二次是2，第三次。。。。。。。。
	$num = intval($_POST['num']);    //这个一般不建议从前传过来，因为如果给传个1000000，那数据库就不被挂了，所以一般都是后端自已定义的。

	//如果不查询数据库的话，最简单的就像下面这样做下判断，当然也可循环判断。
	if($page == 1){
		exit(json_encode('11111111111111111111111'))
	}elseif($page == 2){
		exit(json_encode('22222222222222222222222'))
	}elseif($page == 3){
		exit(json_encode('33333333333333333333333'))
	}elseif($page == 4){
		exit(json_encode('.......................'))
	}

	//如果要查询数据库的话，就把$page 和 $num 当做查询条件写到SQL语句里面去查询，这样可以根据每次前端传过来的参数 返回对应的数据了。
	
	select * from tableName where status = 1 limit ($num *($page-1)), $num  
	
	//大概的思路就这样，后端PHP我也不太懂，正在学习中，说错了别见笑哈，同时欢迎指证！！！
?>

刚好用的上,谢谢了

沐枫自然0
2017/12/22 20:05:40

不客气，相互学习！

沐枫自然0
2017/12/29 12:40:36

前端的ajax请求后端接口时都要设置参数如：

$.ajax({
    type: 'POST',
    url: 'http://www.xxxxxx.com/index.php',
    data: {
    	user: 'name', 
    	id: 666,
    	page: page,  //page是一个变量，第请求一次会向上加1 
    	num: 10  	 //num是每次要请求返回数据的条数（这里是每次10条，这个可以前端定（不建议），也可以后端定），一般是以数组、或 JSON格式返回的，就像下面的 data.result.list 这样就可以循环出来了。
    	},
    timeout: 60000,
    cache: false,
    beforeSend: function() {
    	//在这里，前端可以做一些加载中。。。。，或 载入中。。。。等等之类的动画。
    },
    dataType: 'JSON',
    contentType: "application/x-www-form-urlencoded;charset=utf-8",   
    async:false,
    success: function(data) {
        if("" != data.result.list) {
            let dom = ""
            for(let i = 0; i < data.result.list.length; i++ ) {
                  dom += '<li>'data.result.list[i].smg'</li>';
            }
            $("#id").append(dom);
            //当每次数据请求完成时,把上面做一些加载中。。。。，或 载入中。。。。等等之类的动画去掉。
        } else {
             console.log("没有数据啦，到底了，别扯啦！");
        }
    }
    });
}

后端以PHP为例:

<?php
    $page = intval($_POST['page']);  //每次请求都不一样的如：第一次是1，第二次是2，第三次。。。。。。。。
    $num = intval($_POST['num']);    //这个一般不建议从前传过来，因为如果给传个1000000，那数据库就不被挂了，所以一般都是后端自已定义的。
    //如果不查询数据库的话，最简单的就像下面这样做下判断，当然也可循环判断。
    if($page == 1){
    exit(json_encode('11111111111111111111111'))
    }elseif($page == 2){
    exit(json_encode('22222222222222222222222'))
    }elseif($page == 3){
    exit(json_encode('33333333333333333333333'))
    }elseif($page == 4){
    exit(json_encode('.......................'))
    }
    //如果要查询数据库的话，就把$page 和 $num 当做查询条件写到SQL语句里面去查询，这样可以根据每次前端传过来的参数 返回对应的数据了。
    select * from tableName where status = 1 limit ($num *($page-1)), $num  
    //大概的思路就是这样，后端PHP我也不太懂，正在学习中，说错了别见笑哈，同时欢迎指证！！！
?>

沐枫自然0
2017/12/29 12:43:16

后端以PHP为例:

<?php
	
	$page = intval($_POST['page']);  //每次请求都不一样的如：第一次是1，第二次是2，第三次。。。。。。。。
	$num = intval($_POST['num']);    //这个一般不建议从前传过来，因为如果给传个1000000，那数据库就不被挂了，所以一般都是后端自已定义的。

	//如果不查询数据库的话，最简单的就像下面这样做下判断，当然也可循环判断。
	if($page == 1){
		exit(json_encode('11111111111111111111111'))
	}elseif($page == 2){
		exit(json_encode('22222222222222222222222'))
	}elseif($page == 3){
		exit(json_encode('33333333333333333333333'))
	}elseif($page == 4){
		exit(json_encode('.......................'))
	}

	//如果要查询数据库的话，就把$page 和 $num 当做查询条件写到SQL语句里面去查询，这样可以根据每次前端传过来的参数 返回对应的数据了。
	
	select * from tableName where status = 1 limit ($num *($page-1)), $num  
	
	//大概的思路就这样，后端我也太懂，说错了别见笑哈，同时欢迎指证！！！
?>

我要一个加载中  然后没有更多数据了   怎么弄呀

superXJg0
2017/12/17 17:54:36

找到了  没认真看  尴尬

沐枫自然1
2017/12/18 20:50:41

在ajax请求方法中做一下判断就行了：

function LoadingDataFn() {
    $.ajax({
    type: 'POST',
    url: 'http://www.xxxxxx.com/index.php',
    data: {user: 'name', id: 123},
    timeout: 60000,
    cache: false,
    beforeSend: function() {},
    dataType: 'JSON',
    contentType: "application/x-www-form-urlencoded;charset=utf-8",   
    async:false,
    success: function(data) {
        if("" != data.result.list) {
            let dom = ""
            for(let i = 0; i < data.result.list.length; i++ ) {
                  dom += '<li>'data.result.list[i].smg'</li>';
            }
            $("#id").append(dom);
        } else {
             console.log("没有数据啦，到底了，别扯啦！");
        }
    }
    });
}

当ajax在请求后端时，直到没有数据返回时，向上面一样w判断一下就OK了！

前边几个不好使，一直是window。scroll在动，一注释就不动了

沐枫自然0
2017/11/17 0:00:39

前边几个是指定要在哪个元素中滚动，而window滚动是指定整个窗口，二者尽量不要同时用，这样体验效果不太好（特殊情况除外）。

LoadingDataFn这个用来加载数据，我可以把向后台请求数据ajax方法放这里吧？我想要设置每页显示多少是怎么设置呢？是直接初始化一个每页显示条数，直接传给后台吗？谢谢呢！

沐枫自然3
2017/11/16 23:55:04

function LoadingDataFn() {
    $.ajax({
	type: 'POST',
	url: 'http://www.xxx.com/index.php',
	data: {user: 'name', id: 123},
	timeout: 60000,
	cache: false,
	beforeSend: function() {},
	dataType: 'JSON',
	contentType: "application/x-www-form-urlencoded;charset=utf-8",   
	async:false,
	success: function(data) {
	    if(data.result == 1) {
	        console.log(data.result.msg);
	    }
	}
    });
}

1、向后台请求数据ajax方法（就是 LoadingDataFn()）放在如上这个例子里。

2、想要设置每页显示多少条数据一般是后台设置的，（也可以是前端传过去的，这个和后端的协商好就行了，其是很简单，就是你每次上拉请求的时候比如传个30，让后端每次给你返回30条数就OK了）。

3，当刚一打开进入这个页面的时候就要向后端请求一次数据，然后就是每当（当滚动条的位置到达底部）一次就请求一次后端，页码(page)就向上加1，一直请求到后端没有数据时就做一下提示，比如我们经常看到一些手机页面会提示：别扯啦，到底啦，我是有底限的。。。哈哈！

一缕阳光0
2017/11/17 9:14:29

嗯嗯，我试试，谢谢呢

沐枫自然0
2017/11/18 19:19:17

不客气，相互学习！

厉害！希望能多分享一些功能！jq插件库是授人以鱼，作者是授人与渔

沐枫自然0
2017/9/14 22:07:33
过奖了，相互学习，共同进步！