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>原因：服務(wù)異常</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)文章
在很多網(wǎng)站尤其在一些購物網(wǎng)站上，展示商品的列表頁提供了許多商品，用戶可以選擇商品的展示方式如列表方式展示和櫥窗方式展示等。在本例中，將給您講述如何實現(xiàn)這種效果2011-10-10
這篇文章主要為大家分享了7個jQuery最佳實踐，在使用JavaScript庫的時候，有哪些最佳實踐，又有哪些不好的實踐呢？感興趣的小伙伴們可以參考一下2016-01-01
下面小編就為大家?guī)硪黄猨Query之簡單的表單驗證實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
siblings()方法返回被選元素的所有同級元素。同級元素是共享相同父元素的元素。但是很多朋友不清楚jQuery中的siblings()是什么意思，今天小編給大家介紹下2016-12-12
jquery Easyui Datagrid實現(xiàn)批量操作（編輯，刪除，添加）
本篇文章主要介紹了jquery Easyui Datagrid實現(xiàn)批量操作（編輯，刪除，添加），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
本文示例要為大家實現(xiàn)的效果是鼠標滑動,顯示詳情，代碼很簡潔，很適合學(xué)習2014-01-01
這篇文章主要介紹了jquery實現(xiàn)可自動判斷位置的彈出層效果代碼,可實現(xiàn)根據(jù)鼠標位置進行合理的判斷并顯示彈出層的功能,涉及jQuery鼠標事件及頁面元素位置屬性的相關(guān)判定技巧,需要的朋友可以參考下2015-10-10
jquery $(this).attr $(this).val方法使用介紹
$(this).attr(key); 獲取節(jié)點屬性名的值，相當于getAttribute(key)方法，本文整理了一些相關(guān)的示例，感興趣的朋友可以參考下2013-10-10
jQuery獲取checkboxlist的value值的方法
最近著手一個項目用到了服務(wù)器空間checkboxlist ,使用起來是方便，可以想要從js獲取值就稍微麻煩點了，google后找到了如下方法，感興趣的小伙伴們可以參考一下2015-09-09
jQuery實現(xiàn)鼠標移到某個對象時彈出顯示層功能
這篇文章主要介紹了jQuery實現(xiàn)鼠標移到某個對象時彈出顯示層功能,涉及jQuery基于事件響應(yīng)動態(tài)操作頁面元素屬性相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2018-08-08