Maison > développement back-end > tutoriel php > 求高人,大牛指点下网页到底部了自动加载类容怎么弄

求高人,大牛指点下网页到底部了自动加载类容怎么弄

WBOY
Libérer: 2016-06-06 20:23:10
original
1571 Les gens l'ont consulté

是要用到哪些,有这样的视频或者代码案例吗?谢谢

回复内容:

是要用到哪些,有这样的视频或者代码案例吗?谢谢

html页面:

<code>
    
        <script type="text/javascript" src="jquery.js"></script>
    
    
    
    <div class="con">
        测试内容
    </div>

    
    <script>
        $(window).scroll(function(){
      var scrollTop = $(this).scrollTop(); //获取、判断高度
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if(scrollTop + windowHeight == scrollHeight){
        alert("已经到最底部了!");
            $.ajax({
                type: "GET", //提交方式 GET 或 POST
                url: "test.php", //提交的php脚本
                data: {
                    username:$("#username").val(),  //提交的数据可以为空
                    content:$("#content").val()
                },
                dataType: "html", //返回的类型 还可以是 json格式
                success: function(data){ //成功后返回的数据
                    $('.con').empty();   //清空con里面的所有内容
                        //这里可以对data进行处理
                    $('.con').append(data); //追加进con
                }
            });
      }
    });
    </script>
</code>
Copier après la connexion

php脚本:

test.php

<code><?php echo '测试内容';</code></code>
Copier après la connexion

@Eapen 说的对

不知道你有没有用过Django,可能有错没测试过。。

更新

urls.py

<code>urlpatterns+=patterns('mydjango.getmore',
    (r'^test.html$', 'test'),#先显示test页面
    (r'^getinfo.html$', 'getinfo'),#ajax提交获得新的数据
)</code>
Copier après la connexion

views.py

<code>#先显示test页面
def test(request):
    return render_to_response('test.html',locals())
#ajax提交获得新的数据
def getinfo(request):
    return render_to_response('getinfo.html',locals())</code>
Copier après la connexion

test.html

<code>

    
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
    
    <style type="text/css">
        .con{
            border-style: solid;
            border-color: red;
            width: 500px;
            height: 350px;
        }
    </style>
    
    <div id="add">
        <div class="con">
            测试内容
        </div>
        <div class="con">
            测试内容
        </div>
        <div class="con">
            测试内容
        </div>
    </div>
    
    <script>
        $(window).scroll(function(){
      var scrollTop = $(this).scrollTop(); //获取、判断高度
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if(scrollTop + windowHeight == scrollHeight){
        alert("已经到最底部了!");
                    //如果不懂ajax的话可以去熟悉一下
                    $.ajax({
                                type: "GET", //提交方式 GET 或 POST
                                url: "getinfo.html", //提交的php脚本
                                data: {
                                    username:$("#username").val(),  //提交的数据可以为空
                                    content:$("#content").val()
                                },
                                dataType: "html", //返回的类型 还可以是 json格式
                                success: function(data){ //成功后返回的数据
                                    
                                        //这里可以对data进行处理
                                    $('#add').append(data); //追加进id为add的class
                                }
                            });
      }
    });
    </script>
</code>
Copier après la connexion

getinfo.html

<code><div class="con">
            自动加载的内容
        </div></code>
Copier après la connexion

其实就是主要的核心点还是js与ajax的使用...
js判断是否到底部,到底部了就用ajax异步加载内容...
具体的js与ajax楼上的朋友都已经帮你写好了...
你说的什么数据库操作什么的,ajax请求的url对应的php里面写就是了

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal