Maison > Article > développement back-end > 求高人,大牛指点下网页到底部了自动加载类容怎么弄
是要用到哪些,有这样的视频或者代码案例吗?谢谢
是要用到哪些,有这样的视频或者代码案例吗?谢谢
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>
php脚本:
test.php
<code><?php echo '测试内容';</code></code>
不知道你有没有用过Django,可能有错没测试过。。
urls.py
<code>urlpatterns+=patterns('mydjango.getmore', (r'^test.html$', 'test'),#先显示test页面 (r'^getinfo.html$', 'getinfo'),#ajax提交获得新的数据 )</code>
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>
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>
getinfo.html
<code><div class="con"> 自动加载的内容 </div></code>
其实就是主要的核心点还是js与ajax的使用...
js判断是否到底部,到底部了就用ajax异步加载内容...
具体的js与ajax楼上的朋友都已经帮你写好了...
你说的什么数据库操作什么的,ajax请求的url对应的php里面写就是了