jQuery+AJAX實現(xiàn)無刷新下拉加載更多
更新時間:2015年07月03日 10:36:15 投稿:hebedich
這篇文章主要介紹了jQuery+AJAX實現(xiàn)無刷新下拉加載更多的相關(guān)資料,需要的朋友可以參考下
隨著互聯(lián)網(wǎng)時代的發(fā)展,web前端已經(jīng)和后臺數(shù)據(jù)掛鉤,作為web前端僅僅不是只切圖寫寫html,css 和簡單js交互。
js code
$(function() { var page = 1; var discount = $('#discount'); var innerHeight = window.innerHeight; var timer2 = null; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=1', type: 'GET', dataType: 'json', timeout: '1000', cache: 'false', success: function (data) { if (data.error_code === 0) { var arrText = []; for (var i = 0, t; t = data.list[i++];) { arrText.push('<div class="consume-whole">'); arrText.push('<h3>' + t.title + '</h3>'); if (t.coupon_type == 1 ) { arrText.push('<p>金額:¥' + t.amount + '</p>'); } else { arrText.push('<p>優(yōu)惠:' + t.amount + '</p>'); } arrText.push('<p><span class="hx-user">用戶:s賬戶颯颯是是是啊啊12' + t.user_name +'</span>' + '<span>核銷時間:' + t.use_time + '</span></p>'); arrText.push('</div>'); } discount.html(arrText.join('')); }; var ajax_getting = false; $(window).scroll(function() { clearTimeout(timer2); timer2 = setTimeout(function() { var scrollTop = $(document.body).scrollTop(); var scrollHeight = $('body').height(); var windowHeight = innerHeight; var scrollWhole = Math.max(scrollHeight - scrollTop - windowHeight); if (scrollWhole < 100) { if (ajax_getting) { return false; } else { ajax_getting = true; } discount.append('<div class="load"><img src="/lightapp/static/zhida-yunying/img/load.gif" width="6%" /></div>'); $('html,body').scrollTop($(window).height() + $(document).height()); page++; $.ajax({ url: '/lightapp/marketing/verify/apply/list?page=' + page, type: 'GET', dataType: 'json', success: function (data) { if (data.error_code === 0) { var arrText = []; for (var i = 0, t; t = data.list[i++];) { arrText.push('<div class="consume-whole"><a href="/lightapp/marketing/verify/page/info?rule_id=' + t.rule_id + '&coupon_id='+ t.coupon_id +'">'); arrText.push('<h3>' + t.title + '</h3>'); if (t.coupon_type == 1 ) { arrText.push('<p>金額:¥' + t.amount + '</p>'); } else { arrText.push('<p>優(yōu)惠:' + t.amount + '</p>'); }; arrText.push('<p><span class="hx-user">用戶:賬戶颯111111111' + t.user_name +'</span>' + '<span>核銷時間:' + t.use_time + '</span></p>'); arrText.push('</a></div>'); } discount.append(arrText.join('')); $(".load").remove(); } else { $(".load").remove(); discount.append('<div class="no-data">沒有更多數(shù)據(jù)。</div>'); $(window).unbind('scroll'); }; ajax_getting = false; } }); }; $(".load").remove(); }, 200); }); if (data.error_code == 156006) { $('.coupon').html('<div class="error"><h2>出錯啦!</h2><p>原因:未登錄</p></div>') }; if (data.error_code == 156003) { $('.coupon').html('<div class="error"><h2>出錯啦!</h2><p>原因:權(quán)限不足~請補充</p></div>') }; if (data.error_code == 156007) { $('.coupon').html('<div class="error"><h2>出錯啦!</h2><p>原因:服務異常</p></div>') }; if (data.error_code == 511) { $('.coupon').html('<div class="error"><h2>出錯啦!</h2><p>原因:賬號未開通直達號</p></div>') }; if (data.error_code == 520) { $('.coupon').html('<div class="stays"><span></span><p>暫無核銷記錄</p></div>') } }, error: function (data) { } }) $(window).bind("orientationchange", function() { $('.sliders').css('left',$(window).width() / 2 +'px'); }) })
以上所述就是本文的全部內(nèi)容了,希望大家能夠喜歡。
相關(guān)文章
jQuery實現(xiàn)的導航動畫效果(附demo源碼)
這篇文章主要介紹了jQuery實現(xiàn)的導航動畫效果,可實現(xiàn)導航條的底部橫條隨鼠標移動的效果,涉及jQuery針對鼠標事件的響應及頁面元素樣式動態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04jQuery文本框(input textare)事件綁定方法教程
jquery​的事件綁定已經(jīng)用on替換了原來的bind,接下來為大家分享下bind的使用方法及input textare事件2013-04-04jquery實現(xiàn)通用版鼠標經(jīng)過淡入淡出效果
這篇文章主要介紹了jquery實現(xiàn)的通用版鼠標經(jīng)過淡入淡出效果,需要的朋友可以參考下2014-06-06基于jquery的防止大圖片撐破頁面的實現(xiàn)代碼(立即縮放)
這篇文章將根據(jù)此寫一個應用:讓圖片未加載完畢就實現(xiàn)按比例自適應,防止圖片撐破布局(尤其是外鏈圖片)2011-10-10