집 >웹 프론트엔드 >JS 튜토리얼 >클릭 시 데이터 로딩 목록을 끊지 않고 Ajax를 구현하는 방법

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

php中世界最好的语言원래의: 2018-04-04 10:14:001389검색

이번에는 클릭 시 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;
　　}
}

그런 다음 10개를 더 로드한 다음 이 메서드를 호출해야 하므로 이 메서드는 함수 이름을 선언하고 다음에 사용해야 할 때 호출해야 합니다. 필요한 경우 매개 변수를 전달할 수도 있습니다. 이제 또 다른 질문이 있습니다. 처음으로 10개의 데이터를 로드한 후 처음 10개의 데이터를 로드한 후 다음 json 데이터를 로드해야 합니다. ? ? 상관없습니다. 위에서 정의한 함수를 호출한 다음 매개변수를 전달할 수 있습니다. 매개변수를 계산하는 방법은 무엇입니까? ? ? 먼저 매개변수가 무엇과 관련되어 있는지, 그것이 나와 무엇과 관련되어 있는지, 내가 무엇과 관련되어 있는지 생각해 보세요. 아니면 무엇이 나에게 영향을 미칠 수 있나요?

값만 영향을 받는 것 같은데(말도 안 되는 소리 아닌가요), 이 경우 값은 변하지 않는 숫자가 될 수 없고 변수일 수 밖에 없는데 변수는 어디서 오는 걸까요? ? ?

클릭 이벤트도 있다는 것을 잊지 마세요. 먼저 클릭 수에 대한 변수를 정의하세요. var clickNum = 0입니다. 왜냐하면 로드될 때마다 10개가 있으므로 i의 값은 다음과 같아야 합니다.

i = 10*clickNum, 이는 로드된 첫 번째 데이터의 인덱스 값입니다. 이런 방법으로 위의 문제를 해결했습니다.

이때 아직 해결해야 할 문제가 있습니다. 모든 데이터를 클릭하여 로드할 때 클릭한 버튼을 숨겨야 합니다. 그렇다면 데이터가 로드되었는지 계산하는 방법은 무엇입니까? ? ?

클릭수 clickNum으로 계산할 수 있습니다. 매번 10번씩 로드되므로, 총 로드 횟수를 parsInt((data.list.length)/10)+1로 계산할 수 있습니다. 모직물 로딩 횟수를 1씩 늘려야 하나요?

parseInt()는 반올림되기 때문에(예: 21/10=2) 실제로는 3번 로드해야 하므로 공교롭게도 첫 번째 로드에서는 클릭할 필요가 없으며 브라우저는 데이터가 로드된 후 10을 읽습니다.

clickNum =parseInt((data.list.length)/10), clickNum ==parseInt((data.list.length)/10)이면 클릭 버튼이 숨겨집니다.

아이디어는 기본적으로 명확합니다

二、实现功能

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를 구현하는 방법

관련 기사