Лучший способ захватить данные из ajax и манипулировать им

Question

Я делаю это, чтобы получить изображения из базы данных с помощью ajax, а затем отобразить его с помощью некоторого плагина карусели. Вот как это должно работать:

1. Image URL сохраняется в базе данных от администратора
2. интерфейс скрипт делает вызов Ajax в файл PHP и возвращает из БД все URL.
3. Теперь, когда у меня есть все изображения, можно использовать карусельный плагин.
4. Изображения теперь отображаются один за другим.

Фокус в том, что я хочу сделать еще один вызов ajax при отображении последнего изображения и повторить заполнение контейнера 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 success carousel plugin начинает вращать imgs, а когда он закончен, функция get_images должна быть снова вызвана. Но эта функция уже находится в другой функции, и каждый раз, когда она делает вызов, она будет на один уровень глубже. Есть ли способ сделать это?

Answer 1

Лучшим было бы для карусели запустить событие, чтобы оно нуждалось в большем количестве изображений и прослушивании этого события. Затем вы можете получить больше изображений и вернуть новый список в карусель. Есть карусель плагинов, которые имеют все это построить в Я часто использую этот один:. http://caroufredsel.dev7studios.com/

Answer 2

Может быть, в вашем PHP скрипт:

<?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(); 

Этот Carousel объект запросит массив изображений при создании экземпляра и покажет каждое изображение на 5-секундном интервале. Когда все изображения будут исчерпаны, он автоматически сделает другой вызов AJAX, получая изображения так же, как и первоначально, а затем продолжит цикл через новые изображения. Он будет продолжаться в этом цикле навсегда.