Home > Developer > Web Develop
Html
<Body> <DivID= "More"> <Divclass= "Single_item"> <Divclass= "Date"></Div> <Divclass= "Author"></Div> <Divclass= "title"></Div> </Div> <ahref= "javascript:;"class= "Get_more">Click Load</a> </Div> <Scriptsrc= "Jquery.min.js"></Script> <Scriptsrc= "Jquery.more.js"></Script> <Script> $(function() { $('#more'). More ({'Address': 'data.php' }) }); </Script></Body>
Php
//connecting to a databaserequire_once(' connect.php ');$last=$_post[' Last '];$amount=$_post[' Amount '];$query=mysql_query("SELECT * from article ORDER BY id DESC limit$last,$amount"); while($row=Mysql_fetch_array($query)) { $sayList[] =Array( ' Title ' =$row[' title '], ' author ' =$row[' ID '], ' date ' =Date(' M-d h:i ',$row[' Addtime ']) );}EchoJson_encode ($sayList);
Data format returned by the interface
[ { "title": "XXX", "Author": "1", "date": "04-04 10:34" }, { "title": "XXX", "Author": "1", "date": "04-04 09:52" }, { "title": "XXX", "Author": "1", "date": "04-04 09:18" }, { "title": "XXX", "Author": "1", "date": "04-03 23:44" }, { "title": "XXX", "Author": "1", "date": "04-03 23:09" }, { "title": "XXX", "Author": "1", "date": "04-03 22:33" }, { "title": "XXX", "Author": "1", "date": "04-03 20:25" }, { "title": "XXX", "Author": "1", "date": "04-03 08:26" }, { "title": "XXX", "Author": "1", "date": "04-02 21:56" }, { "title": "XXX", "Author": "1", "date": "04-02 08:52" }]
PS: The returned data key corresponds to class
Jquery.more.js
/** * Call Method: $ (' #more '). More ({' URL ': ' data.php '}); * Amount the number of records per display * Address requested * format accepts data formats * Template HTML Record DIV Class Property * Trigger Trigger load more records Class Property * Scroll support scrolling trigger load * Offset scrolling trigger load offsets * Data Custom parameters * Loading display */(function($) { vartarget =NULL; varTemplate =NULL; varLock =false; varCur_last = 0; varvariables = { ' Last ': 0 } varSettings = { ' Amount ': ' 10 ', ' Address ': ' comments.php ', ' Format ': ' JSON ', ' Template ': '. Single_item ', ' Trigger ': '. Get_more ', ' Scroll ': ' False ', ' Offset ': ' 100 ', ' Data ' : {}, ' Loading ': ' Loading in ... ' } varMethods ={init:function(options) {return This. each (function() { if(options) {$.extend (settings, options); } template= $( This). Children (settings.template). Wrap (' <div/> '). parent (); Template.css (' Display ', ' none '); $( This). Append (' <div class= ' loading ' > ' + settings.loading + ' </div> '); Template.remove (); Target= $( This); if(Settings.scroll = = ' false ') { $( This). Find (Settings.trigger). bind (' Click.more ', Methods.get_data); $( This). More (' Get_data '); } Else { if($( This). Height () <= $ ( This). attr (' scrollheight ') {Target.more (' Get_data ', Settings.amount * 2); } $( This). Bind (' Scroll.more ', Methods.check_scroll); })}, Check_scroll:function() { if((Target.scrolltop () + target.height () + parseint (settings.offset)) >= target.attr (' scrollheight ') && lock = =false) {Target.more (' Get_data '); }}, Debug:function() { vardebug_string = ' '; $.each (variables,function(k, v) {debug_string+ = k + ': ' + v + ' \ n '; }) alert (debug_string); }, remove:function() {Target.children (Settings.trigger). Unbind ('. More '); Target.unbind ('. More ') Target.children (Settings.trigger). Remove (); }, Add_elements:function(data) {varRoot =TargetvarCounter = 0; if(data) {$ (data). each (function() {counter++vart =Template $.each ( This,function(key, value) {if(T.find ('. ' + key)) T.find ('. ' +key). HTML (value); }) if(Settings.scroll = = ' true ') {Root.children ('. Loading '). Before (T.html ())}Else{Root.children (Settings.trigger). Before (T.html ())} Roo T.children (Settings.template+ ': Last '). attr (' id ', ' more_element_ ' + ((variables.last++) + 1)); }) } ElseMethods.remove ()//Target.children ('. Loading '). CSS (' Display ', ' none '); if(Counter <Settings.amount) {Methods.remove (); Target.children ('. Loading '). HTML ("Already in the end"); }}, Get_data:function() { varIle; Lock=true; Target.children (". Loading"). CSS (' Display ', ' block '); $ (Settings.trigger). CSS (' Display ', ' none '); if(typeof(Arguments[0]) = = ' Number ') {ile= Arguments[0]; } Else{ile=Settings.amount; } if(Variables.last >=cur_last) { varPostData =Settings.data; postdata[' Last '] =Variables.last; postdata[' Amount '] =Ile; $.post (settings.address, PostData,function(data) {$ (Settings.trigger). CSS (' Display ', ' block ') methods.add_elements (data) lock=false; }, Settings.format); Cur_last= Cur_last + 10; } } }; $.fn.more=function(method) {if(Methods[method]) {returnMethods[method].apply ( This, Array.prototype.slice.call (arguments, 1)); } Else if(typeofMethod = = ' object ' | | !method) { returnMethods.init.apply ( This, arguments); } Else$.error (' method ' + method + ' does not exist! '); } $ (document). Ready (function() {$ (window). On (' Scroll ',function() { if(document). ScrollTop () + $ (window). Height () > $ (document). Height ()-10) { $('. Get_more '). Click (); } }); });}) (jQuery)
Using Jquery.more.js to implement rolling load data
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
