Ajax 클릭 하여 데이터 목록 계속 불 러 오기

Ajax 소개
AJAX 는'Asynchronous Javascript And XML'(비동기 JavaScript 와 XML)로 대화 형 웹 애플 리 케 이 션 을 만 드 는 웹 개발 기술 을 말한다.
AJAX=비동기 자 바스 크 립 트 와 XML(표준 통용 표기 언어의 부분 집합).
AJAX 는 빠 른 동적 웹 페이지 를 만 드 는 데 사용 되 는 기술 이다.
배경 에서 서버 와 소량의 데이터 교환 을 통 해 AJAX 는 웹 페이지 를 비동기 로 업데이트 할 수 있다.웹 페이지 전 체 를 다시 불 러 오지 않 고 웹 페이지 의 일부분 을 업데이트 할 수 있다 는 뜻 이다.
전통 적 인 웹 페이지(AJAX 를 사용 하지 않 음)는 콘 텐 츠 를 업데이트 하려 면 웹 페이지 전 체 를 다시 불 러 와 야 한다.
모든 기능 을 실현 하 는 데 는 여러 가지 방법 과 사고 가 있 는데 오늘 은 나의 작은 로드 기능 을 정리 합 니 다.
로 딩 은 흔 하 다.모든 휴대 전화 제어 가 그녀 에 게 더 이상 익숙 하지 않다.우리 가 웨 이 보,친구 권,공간...........................................................................또 하 나 는 로 딩 을 클릭 하고 일 정량의 로 딩 을 클릭 한 다음 에 클릭 하고 일 정량의 로 딩 을 하 는 것 이다.
이제 ajax 가 데 이 터 를 하나씩 불 러 오 는 것 과 같은 데이터 목록 을 말씀 드 리 겠 습 니 다.

먼저 10 개 를 표시 하고,그 다음 에 클릭 하여 더 많은 것 을 불 러 오고,10 개 를 표시 합 니 다.

생각
일반적으로 ajax 로 불 러 오 면 모든 데 이 터 를 불 러 옵 니 다.이번 에는 양 적 로 딩 을 제어 하려 면 판단 을 통 해 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 개의 데 이 터 를 다시 불 러 와 야 합 니 다.다음 제 이 슨 데 이 터 를 어떻게 해 야 합 니까?
괜 찮 습 니 다.위 에서 정 의 된 함 수 를 호출 한 후에 인삼 을 전달 할 수 있 습 니 다.매개 변 수 는 어떻게 계산 합 니까?
먼저 매개 변수 가 무엇 과 관계 가 있 는 지,i 와 관계 가 있 는 지,i 는 무엇 과 관계 가 있 는 지 생각해 보 세 요.아니면 뭐 가 i 에 영향 을 줄 수 있 을까요?
그것 의 값 만 영향 을 미 치 는 것 같 습 니 다.(그것 은 쓸데없는 말 이 아 닙 니까?)그러면 그 값 은 변 하지 않 는 숫자 가 될 수 없습니다.하나의 변수 일 수 밖 에 없습니다.그러면 변 수 는 어디에서 옵 니까?
우리 에 게 또 하나의 클릭 이벤트 가 있다 는 것 을 잊 지 마 세 요.먼저 클릭 횟수 의 변 수 를 정의 합 니 다 var clickNum=0.불 러 올 때마다 10 개 이기 때문에 i 의 값 은:
i=10*clickNum,첫 번 째 데 이 터 를 불 러 올 때마다 색인 값 입 니 다.이렇게 해서 우 리 는 위의 그 문 제 를 해결 했다.
이때 해결 해 야 할 문제 가 있 습 니 다.데이터 가 모두 불 러 오 기 를 클릭 한 후에 단 추 를 누 르 면 숨겨 야 합 니 다.그러면 데 이 터 를 불 러 온 것 을 어떻게 계산 합 니까?
클릭 횟수 clickNum 을 통 해 계산 할 수 있 습 니 다.매번 10 개 를 불 러 오기 때문에 모두 불 러 와 야 할 횟수 parseInt((data.list.length)+1 을 계산 할 수 있 습 니 다.왜 불 러 오 는 횟수 는 1 을 추가 해 야 합 니까?
parseInt()은 수정 입 니 다.예 를 들 어 21/10=2 이지 만 실제 적 으로 3 번 을 불 러 와 야 하기 때문에 1 을 추가 해 야 합 니 다.공교롭게도 우리 가 처음으로 불 러 오 는 것 은 클릭 하지 않 아 도 됩 니 다.브 라 우 저가 불 러 와 서 10 개의 데 이 터 를 읽 었 습 니 다.
그래서 clickNum=parseInt((data.list.length)/10),clickNum==parseInt((data.list.length)/10)시 클릭 단 추 를 숨 깁 니 다.
사고의 방향 이 기본적으로 명확 해 졌 다.
2.실현 기능
HTML：

<dl id="incomeNum">
　　<dt><em></em>      </dt>
</dl>
<div class="jiaZai_more">      </div>

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+' '+month+' '+day+' ';
htmltxt += '<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);
});

위 에서 말 한 것 은 편집장 님 께 서 소개 해 주신 Ajax 클릭 으로 데이터 목록 을 계속 불 러 오 는 것 입 니 다.여러분 께 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!