支付宝赞助帐号:service@kuitao8.com 

jquery ajax加载分页

Created2016-01-21   Views 2766    Author 懒人程序
  1. $(document).ready(function () { 
  2.  
  3. var output = $('#news'); 
  4. var count = "2"
  5. var page = "1"
  6. var load = function() { 
  7. $.ajax({ 
  8.     url: 'http://domain.com/api/get_recent_posts/?post_type=news&count=' + count + '&page=' + page + '&callback=?'
  9.     async: false
  10.     callback: 'callback'
  11.     crossDomain: true
  12.     contentType: 'application/json; charset=utf-8'
  13.     type: 'POST'
  14.     dataType: 'jsonp'
  15.     timeout: 5000, 
  16.     success: function (data, status) { 
  17.         $.each(data.posts, function (i, item) { 
  18.             output.append($('<li />').text(item.title)); 
  19.         }); 
  20.  
  21.         if (data !== undefined && data !== undefined) { 
  22.             $('#stats').text('Page ' + page + ' of ' + data.pages + ' | Total posts ' + data.count_total + ''); 
  23.         } 
  24.         if (page == data.pages) { 
  25.              $("#loadmore").remove(); 
  26.         } 
  27.         page++; 
  28.  
  29.     }, 
  30.     error: function () { 
  31.         output.html('<h2 class="error">There was an error loading the data.</h2>'); 
  32.     } 
  33. }); 
  34. }; 
  35. //add click handler 
  36. $('#loadmore').click(function() {load();}); 
  37. //load first page 
  38. $('#loadmore').trigger('click'); 
  39. //or 
  40. load(); 
  41. }); 

 

上一篇: html5 ajax上传图片的方法
下一篇: jquery显示隐藏密码文本框
支持键盘 ← →

邮件订阅

订阅我们的精彩内容