jQuery+AJAX實(shí)現(xiàn)無刷新下拉加載更多
隨著互聯(lián)網(wǎng)時(shí)代的發(fā)展,web前端已經(jīng)和后臺(tái)數(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>核銷時(shí)間:' + 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>核銷時(shí)間:' + 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>出錯(cuò)啦!</h2><p>原因:未登錄</p></div>')
};
if (data.error_code == 156003) {
$('.coupon').html('<div class="error"><h2>出錯(cuò)啦!</h2><p>原因:權(quán)限不足~請(qǐng)補(bǔ)充</p></div>')
};
if (data.error_code == 156007) {
$('.coupon').html('<div class="error"><h2>出錯(cuò)啦!</h2><p>原因:服務(wù)異常</p></div>')
};
if (data.error_code == 511) {
$('.coupon').html('<div class="error"><h2>出錯(cuò)啦!</h2><p>原因:賬號(hào)未開通直達(dá)號(hào)</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實(shí)現(xiàn)的導(dǎo)航動(dòng)畫效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航動(dòng)畫效果,可實(shí)現(xiàn)導(dǎo)航條的底部橫條隨鼠標(biāo)移動(dòng)的效果,涉及jQuery針對(duì)鼠標(biāo)事件的響應(yīng)及頁面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
jquery模擬多級(jí)復(fù)選框效果的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query模擬多級(jí)復(fù)選框效果的簡單實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jquery操作ID帶有變量的節(jié)點(diǎn)實(shí)例
下面小編就為大家?guī)硪黄猨query操作ID帶有變量的節(jié)點(diǎn)實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12
jQuery文本框(input textare)事件綁定方法教程
jquery​的事件綁定已經(jīng)用on替換了原來的bind,接下來為大家分享下bind的使用方法及input textare事件2013-04-04
jquery實(shí)現(xiàn)通用版鼠標(biāo)經(jīng)過淡入淡出效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的通用版鼠標(biāo)經(jīng)過淡入淡出效果,需要的朋友可以參考下2014-06-06
基于jquery的防止大圖片撐破頁面的實(shí)現(xiàn)代碼(立即縮放)
這篇文章將根據(jù)此寫一個(gè)應(yīng)用:讓圖片未加載完畢就實(shí)現(xiàn)按比例自適應(yīng),防止圖片撐破布局(尤其是外鏈圖片)2011-10-10

