jQuery+AJAX实现无刷新下拉加载更多

这篇文章主要介绍了jQuery+AJAX实现无刷新下拉加载更多的相关资料,需要的朋友可以参考下

随着互联网时代的发展，web前端已经和后台数据挂钩，作为web前端仅仅不是只切图写写html，css 和简单js交互。

js code

1. $(function() { 
2. var page = 1; 
3. var discount = $('#discount'); 
4. var innerHeight = window.innerHeight; 
5. var timer2 = null; 
6. $.ajax({ 
7. url: '/lightapp/marketing/verify/apply/list?page=1', 
8. type: 'GET', 
9. dataType: 'json', 
10. timeout: '1000', 
11. cache: 'false', 
12. success: function (data) { 
13. if (data.error_code === 0) { 
14. var arrText = []; 
15. for (var i = 0, t; t = data.list[i++];) { 
16. arrText.push('<div class="consume-whole">'); 
17. arrText.push('<h3>' + t.title + '</h3>'); 
18. if (t.coupon_type == 1 ) { 
19. arrText.push('<p>金额：￥' + t.amount + '</p>'); 
20. } else { 
21. arrText.push('<p>优惠：' + t.amount + '</p>'); 
22. } 
23. arrText.push('<p><span class="hx-user">用户：s账户飒飒是是是啊啊12' + t.user_name +'</span>' + '<span>核销时间：' + t.use_time + '</span></p>'); 
24. arrText.push('</div>'); 
25. } 
26. discount.html(arrText.join('')); 
27. }; 
28. var ajax_getting = false;　 
29. $(window).scroll(function() { 
30. clearTimeout(timer2); 
31. timer2 = setTimeout(function() { 
32. var scrollTop = $(document.body).scrollTop();　　 
33. var scrollHeight = $('body').height();　　 
34. var windowHeight = innerHeight; 
35. var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight); 
36. if (scrollWhole < 100) { 
37. if (ajax_getting) { 
38. return false; 
39. } else { 
40. ajax_getting = true; 
41. } 
42. discount.append('<div class="load"><img src="/lightapp/static/zhida-yunying/img/load.gif" width="6%" /></div>'); 
43. $('html,body').scrollTop($(window).height() + $(document).height()); 
44. page++; 
45. $.ajax({ 
46. url: '/lightapp/marketing/verify/apply/list?page=' + page, 
47. type: 'GET', 
48. dataType: 'json', 
49. success: function (data) { 
50. if (data.error_code === 0) { 
51. var arrText = []; 
52. for (var i = 0, t; t = data.list[i++];) { 
53. arrText.push('<div class="consume-whole"><a href="/lightapp/marketing/verify/page/info?rule_id=' + t.rule_id + '&coupon_id='+ t.coupon_id +'">'); 
54. arrText.push('<h3>' + t.title + '</h3>'); 
55. if (t.coupon_type == 1 ) { 
56. arrText.push('<p>金额：￥' + t.amount + '</p>'); 
57. } else { 
58. arrText.push('<p>优惠：' + t.amount + '</p>'); 
59. }; 
60. arrText.push('<p><span class="hx-user">用户：账户飒111111111' + t.user_name +'</span>' + '<span>核销时间：' + t.use_time + '</span></p>'); 
61. arrText.push('</a></div>'); 
62. } 
63. discount.append(arrText.join('')); 
64. $(".load").remove(); 
65. } else { 
66. $(".load").remove(); 
67. discount.append('<div class="no-data">没有更多数据。</div>'); 
68. $(window).unbind('scroll'); 
69. }; 
70. ajax_getting = false; 
71. } 
72. });　　 
73. }; 
74. $(".load").remove(); 
75. }, 200); 
76. }); 
77. if (data.error_code == 156006) { 
78. $('.coupon').html('<div class="error"><h2>出错啦！</h2><p>原因：未登录</p></div>') 
79. }; 
80. if (data.error_code == 156003) { 
81. $('.coupon').html('<div class="error"><h2>出错啦！</h2><p>原因：权限不足~请补充</p></div>') 
82. }; 
83. if (data.error_code == 156007) { 
84. $('.coupon').html('<div class="error"><h2>出错啦！</h2><p>原因：服务异常</p></div>') 
85. }; 
86. if (data.error_code == 511) { 
87. $('.coupon').html('<div class="error"><h2>出错啦！</h2><p>原因：账号未开通直达号</p></div>') 
88. }; 
89. if (data.error_code == 520) { 
90. $('.coupon').html('<div class="stays"><span></span><p>暂无核销记录</p></div>') 
91. } 
92.  
93. }, 
94. error: function (data) { 
95.  
96. } 
97. }) 
98. $(window).bind("orientationchange", function() { 
99. $('.sliders').css('left',$(window).width() / 2 +'px'); 
100. }) 
101. }) 

以上所述就是本文的全部内容了，希望大家能够喜欢。