아약스에서 데이터를 캡처하여 조작하는 가장 좋은 방법

Question

아약스를 사용하여 데이터베이스에서 이미지를 가져 와서 일부 회전식 플러그인으로 이미지를 표시해야합니다. 여기 그것이 작동하는 방법이다 :

1. 이미지 URL은
2. 프론트 엔드 스크립트는 PHP 파일에 아약스 호출을 모든 URL의에서 DB를 반환 관리자에서 데이터베이스에 저장됩니다.
3. 이제 모든 이미지가있을 때 캐 러셀 플러그인을 적용 할 수 있습니다.
4. 이미지가 하나씩 표시됩니다.

트릭은 마지막 이미지가 표시 될 때 다른 아약스 호출을 만들고 데이터베이스의 신선한 이미지로 컨테이너 div를 다시 채 웁니다. 여기 내 코드가

function get_images(){ 
var data = { 
    "function_name" : "get_images", 
    "args" : "" 
}; 

$.ajax({ 
    type : "POST", 
    url : "http://localhost/.../functions.php", 
    data : data, 
    dataType : "JSON", 
    success : function(ret){ 
     $(".container").html(ret); 
     $(".container").carousel(//When last call - function again); 

    } 
}); 
} 

그리고 여기에 문제가있다. ajax 성공에 carousel 플러그인이 imgs를 회전하기 시작했고, 완료되면 get_images 함수를 다시 호출해야합니다. 그러나이 기능은 이미 다른 기능에 포함되어 있으며 전화를 걸 때마다 한 단계 더 깊어집니다. 이 일을하는 방법이 있습니까?

Answer 1

캐 러셀이 더 많은 이미지가 필요하고 해당 이벤트를 수신하는 이벤트를 발생시키는 것이 가장 좋습니다. 그런 다음 더 많은 이미지를 검색하고 새 목록을 캐 러셀에 반환 할 수 있습니다. 이 모든 빌드를 회전 목마 플러그인이 있습니다 나는 종종이 하나를 사용하십시오. 당신의 PHP 스크립트에서 어쩌면 http://caroufredsel.dev7studios.com/

Answer 2

을 :

<?php 
    if (isset($_POST['function_name'])) { 
     if ($_POST['function_name'] == 'get_images') { 
      // Get some URLs into an array... 
      // For the sake of the example we'll manually fill the array 
      $urls = ['img/image1.png', 'img/image2.png']; 
      echo json_encode($urls); 
     } 
    } 

을 그리고 당신의 JS에서 :

function Carousel() { 
    this.getMoreImages(); 
} 

Carousel.prototype.nextImage = function() { 
    if (this.i < this.images.length) { 
     this.showImage(); // Implement this. 
     this.i += 1; 
     this.spin(): 
    } 
    else { 
     this.getMoreImages(); 
    } 
} 

Carousel.prototype.spin = function() { 
    var self = this; 
    setTimeout(function() { 
     self.nextImage(); 
    }, 5000); 
} 

Carousel.prototype.getMoreImages = function() { 
    var self = this; 
    $.ajax({ 
     type : 'POST', 
     url : 'http://localhost/.../functions.php', 
     data : data, 
     dataType : 'JSON', 
     success : function (ret) { 
      self.images = JSON.parse(ret); 
      self.i = 0; 
      self.spin(); 
     } 
    }); 
} 

var myCarousel = new Carousel(); 

이 회전 목마 객체 인스턴스화시 이미지 배열을 요청하고 각 이미지를 5 초 간격으로 표시합니다. 모든 이미지가 고갈되면 자동으로 다른 AJAX 호출을 만들어 원래와 동일한 방식으로 이미지를 검색 한 다음 새 이미지를 반복합니다. 이 사이클에서 영원히 계속 될 것입니다.