집 >웹 프론트엔드 >JS 튜토리얼 >Ajax를 클릭하면 데이터 목록이 지속적으로 로드됩니다(그래픽 튜토리얼).

Ajax를 클릭하면 데이터 목록이 지속적으로 로드됩니다(그래픽 튜토리얼).

亚连원래의: 2018-05-23 16:07:492464검색

이 글에서는 Ajax를 클릭하여 데이터 목록을 계속 로드하는 것에 대한 관련 정보를 주로 소개합니다. 필요한 친구들은 참고하면 됩니다.

Ajax 소개

AJAX는 "Asynchronous Javascript And XML"(비동기 JavaScript 및 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번씩 로드되므로, 총 로드 횟수를 계산할 수 있습니다.parseInt((data.list.length)/10)+1, 로딩 횟수를 1로 늘려야 하는 이유는 무엇입니까?

parseInt()는 21/10=2처럼 반올림되기 때문에 실제로는 3번 로드해야 하므로 1을 추가해야 합니다. 공교롭게도 첫 번째 로드인 브라우저를 클릭할 필요가 없습니다. 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>&#39;;
htmltxt += &#39;<h5 class="date">&#39;+date+&#39;</h5>&#39;;
htmltxt += &#39;<p class="income">&#39;+data.list[i].profit+&#39;%</p>&#39;;
if(ci> 10){
break;
}
$("#incomeNum").append(htmltxt);
}
}
},
error: function (e, d, c) {
console.log(d)
}
});
}
nwalletProfit(0);
var clickNum = 0; //点击的次数
$(".jiaZai_more").on(&#39;click&#39;, function(event) {
event.preventDefault();
clickNum++;
var iNum = 10*clickNum; //每次点击开始加载的第一个索引值
nwalletProfit(iNum, clickNum);
});

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Ajax를 클릭하면 데이터 목록이 지속적으로 로드됩니다(그래픽 튜토리얼).

관련 기사