Ajax의 루프 방식

개발 중 목록 페이지가 로드되면 서버로 이동하여 목록에 있는 각 항목의 ID를 기반으로 해당 데이터를 얻은 다음 얻은 데이터를 현재 ID에 해당하는 레이블에 할당해야 합니다. 이것을 달성하기 위해? 이제 Ajax의 루프 방식을 소개하겠습니다. 관심 있는 친구들은 함께 배울 수 있습니다

Ajax 소개

Ajax는 HTML, JavaScript™ 기술, DHTML 및 DOM으로 구성되어 있습니다. 이 뛰어난 방법은 서투른 Transform을 만들 수 있습니다. 웹 인터페이스를 대화형 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];

루프 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);
});
}
}

호출:

$(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);
});

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

위는 다음과 같습니다. 제가 모두를 위해 정리한 내용이 앞으로는 모두에게 도움이 되기를 바랍니다.

관련 기사:

AJAX는 사용자 등록 여부를 확인하는 데 사용됩니다.

ajax는 비동기 파일 또는 이미지 업로드 기능을 구현합니다.

WeChat이 이전 페이지로 돌아가는 문제를 해결하고 AJAX 요청이 페이지가 요청 받기 질문에 유효하지 않습니다

위 내용은 Ajax의 루프 방식의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!