클릭 시 데이터 로딩 목록을 끊지 않고 Ajax를 구현하는 방법

이번에는 클릭 시 Ajax가 논스톱 데이터 로딩 목록을 달성하는 방법을 보여 드리겠습니다. 클릭 시 논스톱 데이터 로딩 목록을 달성하기 위한 Ajax의 주의 사항은 무엇입니까?

Ajax 소개

AJAX는 "Asynchronous Javascript And XML"(Asynchronous JavaScript and XML)을 의미하며 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미합니다.

AJAX = 비동기 JavaScript 및 XML(표준 범용 마크업 언어의 하위 집합).

AJAX는 빠르고 동적인 웹 페이지를 만드는 기술입니다.

AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하지 않는 기존 웹페이지에서는 콘텐츠를 업데이트해야 하는 경우 전체 웹페이지를 다시 로드해야 합니다.

각 기능을 구현하는 방법과 아이디어는 다양합니다. 오늘은 제가 가지고 있는 작은 로딩 기능을 정리해보겠습니다.

로딩은 매우 일반적이며 모든 휴대 전화 중독자는 그녀에게 매우 익숙합니다. Weibo, Moments, Space 등을 스크롤할 때마다 특정 양만큼 슬라이드하면 더 많이 로드하라는 알림이 표시됩니다. 이는 로드하는 한 가지 방법이며, 다른 하나는 클릭하여 로드하는 것입니다. 특정 양을 로드한 다음 클릭한 다음 특정 양을 로드합니다(말도 안되는 일이 많습니다).

이제 다음과 같은 데이터 목록인 데이터를 하나씩 로드하는 ajax에 대해 이야기해 보겠습니다.

먼저 10을 표시한 다음 클릭하여 더 로드하고 그 다음 10을 표시합니다... 이번에는 로드량을 조절하려면 판단을 사용해야 하며 10에 도달하면 로드를 중지하도록 판단한 다음 다음 10개 로드 후 계속 로드하려면 버튼을 클릭하세요.

10개 항목만 로딩을 제어하고 싶다면 어떻게 해야 할까요? i를 순회하여 10을 판단할 수는 없습니다. 10을 로드한 후 나중에 로드가 있기 때문에 다음 10을 판단하기 어렵기 때문에 로드된 수를 계산하려면 새 변수를 정의해야 합니다.

var ci = 0;
for(var i = 0; i < data.list.length; i++){
　　ci++; 
　　if(ci> 10){
　　break;
　　}
}

二、实现功能

HTML：

<dl id="incomeNum">
　　<dt><em></em>每日分配收益</dt>
</dl>
<p class="jiaZai_more">点击查看更多</p>

css：

此处省略css。

js：

function nwalletProfit(num, cNum){
$.ajax({
type: "post",
async: true,
url: url,
dataType: "json",
success: function (data) {
if (data.list.length > 0){
var i = num;
var ci= 0;
var x = parseInt((data.profit_list.length)/10);//x为每10个一组的组数
if(cNum >= x){
$(".jiaZai_more").hide(); //当点击更多的次数 ≥ 组数时，隐藏按钮
}
for(; i < data.profit_list.length; i++){
var htmltxt = "";
ci++; 
var date = data.profit_list[i].date;
var year = date.substring(0, 4);
var month = date.substring(4, 6);
var day = date.substring(6);
date = year+&#39;年&#39;+month+&#39;月&#39;+day+&#39;日&#39;;
htmltxt += &#39;<dd>';
htmltxt += '<h5 class="date">'+date+'</h5>';
htmltxt += '<p class="income">'+data.list[i].profit+'%</p>';
if(ci> 10){
break;
}
$("#incomeNum").append(htmltxt);
}
}
},
error: function (e, d, c) {
console.log(d)
}
});
}
nwalletProfit(0);
var clickNum = 0; //点击的次数
$(".jiaZai_more").on('click', function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
nwalletProfit(iNum, clickNum);
});

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax怎么实现智能提示关联词搜索

jQuery.ajaxWebService请求WebMethod处理Ajax

위 내용은 클릭 시 데이터 로딩 목록을 끊지 않고 Ajax를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!