帝国CMS内容点击无限加载思路与php文件代码

无限加载常见的原理是利用PHP文件调用数据库信息,在用JS读取PHP信息,最后插入显示到页面.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7669.html

PHP文件代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7669.html

1. <?php
2. require_once('../../e/class/connect.php'); //引入数据库配置文件和公共函数文件
3. require('../../e/class/db_sql.php'); //引入数据库操作文件
4. $link=db_connect(); //连接MYSQL
5. $empire=new mysqlquery(); //声明数据库操作类
6. $editor=1; //声明目录层次
8. $last = $_POST['last'];
9. $amount = $_POST['amount'];
11. $user = array('demo1','demo2','demo3','demo3','demo4');
12. $sql=$empire->query("select * from ceshi_ecms_news order by id desc limit $last,$amount");
14. while ($row=$empire->fetch($sql)) {
15.     $addurl="<a href=".$row['titleurl'].">".$row['title']."</a>";
16.     $sayList[] = array(
17.         'content'=>$row['username'],
18.         'author'=>$addurl,
19.         'url'=>$row['titleurl'],
20.         'date'=>date('m-d H:i',$row['newstime'])
21.       );//开源软件:phpfensi.com
22. }
23. echo json_encode($sayList);
25. db_close(); //关闭MYSQL链接
26. $empire=null; //注消操作类变量
27. ?>

JS调用代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7669.html

1. (function( $ ){
2.     var target = null;
3.     var template = null;
4.     var lock = false;
5.     var variables = {
6.         'last'      :    0
7.     }
8.     var settings = {
9.         'amount'      :   '10',
10.         'address'     :   'comments.php',
11.         'format'      :   'json',
12.         'template'    :   '.single_item',
13.         'trigger'     :   '.get_more',
14.         'scroll'      :   'false',
15.         'offset'      :   '100',
16.         'spinner_code':   ''
17.     }
19.     var methods = {
20.         init  :   function(options){
21.             return this.each(function(){
23.                 if(options){
24.                     $.extend(settings, options);
25.                 }
26.                 template = $(this).children(settings.template).wrap('<div/>').parent();
27.                 template.css('display','none')
28.                 $(this).append('<div class="more_loader_spinner">'+settings.spinner_code+'</div>')
29.                 $(this).children(settings.template).remove()
30.                 target = $(this);
31.                 if(settings.scroll == 'false'){
32.                     $(this).find(settings.trigger).bind('click.more',methods.get_data);
33.                     $(this).more('get_data');
34.                 }
35.                 else{
36.                     if($(this).height() <= $(this).attr('scrollHeight')){
37.                         target.more('get_data',settings.amount*2);
38.                     }
39.                     $(this).bind('scroll.more',methods.check_scroll);
40.                 }
41.             })
42.         },
43.         check_scroll : function(){
44.             if((target.scrollTop()+target.height()+parseInt(settings.offset)) >= target.attr('scrollHeight') && lock == false){
45.                 target.more('get_data');
46.             }
47.         },
48.         debug :   function(){
49.             var debug_string = '';
50.             $.each(variables, function(k,v){
51.                 debug_string += k+' : '+v+'\n';
52.             })
53.             alert(debug_string);
54.         },
55.         remove        : function(){
56.             target.children(settings.trigger).unbind('.more');
57.             target.unbind('.more')
58.             target.children(settings.trigger).remove();
59.         },
60.         add_elements  : function(data){
61.             //alert('adding elements')
63.             var root = target
64.          //   alert(root.attr('id'))
65.             var counter = 0;
66.             if(data){
67.                 $(data).each(function(){
68.                     counter++
69.                     var t = template
70.                     $.each(this, function(key, value){
71.                         if(t.find('.'+key)) t.find('.'+key).html(value);
72.                     })
73.                     //t.attr('id', 'more_element_'+ (variables.last++))
74.                     if(settings.scroll == 'true'){
75.                     //    root.append(t.html())
76.                     root.children('.more_loader_spinner').before(t.html())
77.                     }else{
78.                     //    alert('...')
80.                           root.children(settings.trigger).before(t.html())
82.                     }
84.                     root.children(settings.template+':last').attr('id', 'more_element_'+ ((variables.last++)+1))
86.                 })
89.             }
90.             else  methods.remove()
91.             target.children('.more_loader_spinner').css('display','none');
92.             if(counter < settings.amount) methods.remove()
94.         },
95.         get_data      : function(){
96.            // alert('getting data')
97.             var ile;
98.             lock = true;
99.             target.children(".more_loader_spinner").css('display','block');
100.             $(settings.trigger).css('display','none');
101.             if(typeof(arguments[0]) == 'number') ile=arguments[0];
102.             else {
103.                 ile = settings.amount;
104.             }
106.             $.post(settings.address, {
107.                 last : variables.last,
108.                 amount : ile
109.             }, function(data){
110.                 $(settings.trigger).css('display','block')
111.                 methods.add_elements(data)
112.                 lock = false;
113.             }, settings.format)
115.         }
116.     };
117.     $.fn.more = function(method){
118.         if(methods[method])
119.             return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
120.         else if(typeof method == 'object' || !method)
121.             return methods.init.apply(this, arguments);
122.         else $.error('Method ' + method +' does not exist!');
124.     }
125. })(jQuery)

HTML代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/cms/7669.html

1. <script type="text/javascript" src="js/jquery.more.js"></script>
2. <script>
3. $(function(){
4. $('#more').more({'address': 'data.php'})
5. });
6. </script>
7. <div class="lb-menu">
8. <div class="sideMenu">
9. <h3 class="on"><em></em>衣服</h3>
10. <ul>
11. <li>男士</li>
12. <li>女士</li>
13. <li>童装</li>
14. </ul>
15. <h3><em></em>鞋子</h3>
16. <ul>
17. <li>男士</li>
18. <li>女士</li>
19. <li>童装</li>
20. </ul>
21. <h3><em></em>配饰</h3>
22. <ul>
23. <li>男士</li>
24. <li>女士</li>
25. <li>童装</li>
26. </ul>
27. </div>
28. </div>
29. <div id="more">
30. <div class="single_item">
31. <div class="element_head">
32. <div class="date"></div>
33. <div class="author"></div>
34. </div>
35. <div class="content"></div>
36. <div class="url"></div>
37. </div>
38. <a href="javascript：;" class="get_more">::点击加载更多内容::</a> </div>