2013-09-29 16 views
0

我正在做一個應該從ajax數據庫中獲取圖像,然後用一些旋轉木馬插件顯示它。下面是它如何工作:從ajax捕獲數據並使用它操作的最佳方法

  1. 圖片網址從管理員保存到數據庫
  2. 前端腳本,使一個PHP文件中的AJAX調用和返回所有的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成功傳送帶插件開始旋轉imgs,並且當它完成時,應該再次調用get_images函數。但是這個函數已經在另一個函數中,每次調用時它都會更深一層。有沒有辦法做到這一點?

回答

1

最好的方式就是讓旋轉木馬發起一個需要更多圖像並聽取該事件的事件。然後您可以檢索更多圖像並將新列表返回到旋轉木馬。有跡象表明,有這一切建立在旋轉木馬的插件我經常用這一個:在你的PHP腳本http://caroufredsel.dev7studios.com/

1

可能:

<?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調用,以與原來相同的方式檢索圖像,然後繼續循環播放新圖像。它將永遠在這個循環中繼續。

相關問題