집 > 기사 > 웹 프론트엔드 > Ajax를 사용하여 루프를 구현하는 방법

Ajax를 사용하여 루프를 구현하는 방법

php中世界最好的语言원래의: 2018-04-25 14:59:084066검색

이번에는 Ajax를 사용하여 루프를 구현하는 방법과 Ajax를 사용하여 루프를 구현하는 경우의 주의 사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

Ajax 소개

HTML, JavaScript™ 기술, DHTML 및 DOM으로 구성된 Ajax는 투박한 웹 인터페이스를 대화형 Ajax 애플리케이션으로 변환하는 훌륭한 방법입니다. Ajax 전문가인 이 기사의 저자는 일반적인 개요부터 자세한 논의에 이르기까지 이러한 기술이 어떻게 함께 작동하여 효율적인 웹 개발을 현실로 만드는지 보여줍니다. 그는 또한 XMLHttpRequest 객체를 포함한 핵심 Ajax 개념을 쉽게 설명합니다.

5년 전에는 XML을 몰랐다면 아무도 심각하게 받아들이지 않는 미운 오리새끼였습니다. 18개월 전, 루비가 주목의 중심이 되었고, 루비를 모르는 프로그래머들은 벤치에 앉아야 했습니다. 오늘날 최신 기술 유행을 따라가고 싶다면 목적지는 Ajax입니다.

그러나 Ajax는 단순한 유행이 아니라 완전히 새로운 언어를 배우는 것만큼 어렵지 않은 웹사이트를 구축하는 강력한 방법입니다.

1. 비즈니스 요구 사항

개발 중에 목록 페이지가 로드되면 서버로 이동하여 목록에 있는 각 항목의 ID를 기반으로 해당 데이터를 얻은 다음 얻은 데이터를 할당해야 합니다. 현재 ID에 해당하는 라벨에 대한 데이터입니다.

예를 들어 다음 표는 다음과 같습니다.

제품 번호를 기반으로 ajax를 통해 서버에서 해당 제품 이름을 가져온 다음 js를 사용하여 업데이트해야 합니다. 인터페이스 (실제 업무는 당연히 제품명을 구하는 것이 아닙니다) 단순)

2. 구현 계획

2.1 오류 계획

일반적인 상황에서는 for 루프 작성을 직접 생각하게 됩니다. , 루프에서 데이터를 얻기 위해 ajax 요청을 시작한 다음 데이터를 얻습니다. 데이터는 다음과 같이 해당 ID

에 해당하는 레이블로 업데이트됩니다.

배열을 사용하여 일련의 ID를 시뮬레이션합니다.

var array = [1, 3, 2, 5, 3];

Loop ajax 요청 방법 :

function foreach_ajax() {
for (var i = 0; i < array.length; i++) {
$.get("/home/loop_ajax", { value: array[i] }, function (data) {
console.log(array[i]+","+data);
});
}
}

Call:

$(function () {
foreach_ajax(); 
});

테스트 결과는 다음과 같습니다.

루프 내부에서는 array[i]의 값을 전혀 가져올 수 없음을 알 수 있습니다.

이 결과의 이유는 ajax가 비동기적으로 실행되기 때문입니다. 루프 끝에서 첫 번째 ajax는 서버 데이터를 반환하지 않았으며 루프가 끝나면 for 변수 i가 해제되었으므로 array[i ]=undefine

2.2 올바른 해결책

올바른 방법은 ajax를 재귀적으로 반복하는 것입니다.

는 다음과 같습니다.

배열을 사용하여 일련의 ID를 시뮬레이션합니다.

var array = [1, 3, 2, 5, 3];

재귀적 ajax 요청 방법:

function Loop_ajax(index, array) {
if (index < array.length) { 
var value = array[index];
$.get("/home/loop_ajax", { value: value }, function (data) {
console.log(array[index] + "," + data);
if (index < array.length) {
Loop_ajax(index + 1, array); 
}
});
}
}

Call:

$(function () {
Loop_ajax(0, array);
});

테스트 결과는 다음과 같습니다.

믿습니다. 이 기사의 사례를 읽은 후 방법을 마스터했습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!