使用php将值从数据库传递到jquery

Question

我有一个带有jQuery的滑块。 我想要的是我想建立一种动态的方式来填充滑块的图像。 例如，用户将图像放入数据库，并且滑块自动显示它们：

TEST.slider = function(){
 $.supersized({
  // Functionality
  slideshow               :   1,   // Slideshow on/off
  autoplay    : 1,   // Slideshow starts playing automatically
  start_slide             :   1,   // Start slide (0 is random)
  stop_loop    : 0,   // Pauses slideshow on last slide
  random     :  0,   // Randomize slide order (Ignores start slide)
  slide_interval          :   4000,  // Length between transitions
  transition              :   1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
  transition_speed  : 300,  // Speed of transition
  new_window    : 1,   // Image links open in new window/tab
  pause_hover             :   0,   // Pause slideshow on hover
  keyboard_nav            :   1,   // Keyboard navigation on/off
  performance    : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
  image_protect   : 1,   // Disables image dragging and right click with Javascript

  // Size & Position         
  min_width          :   0,   // Min width allowed (in pixels)
  min_height          :   0,   // Min height allowed (in pixels)
  vertical_center         :   1,   // Vertically center background
  horizontal_center       :   1,   // Horizontally center background
  fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions)
  fit_portrait          :   1,   // Portrait images will not exceed browser height
  fit_landscape   :   0,   // Landscape images will not exceed browser width

  // Components       
  slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
  thumb_links    : 0,   // Individual thumb links for each slide
  thumbnail_navigation    :   0,   // Thumbnail navigation
  slides      :   [   // Slideshow Images
           {image : 'img/slider-images/image01.jpg', title : '<div class="slide-content">CESI</div>', thumb : '', url : '<a href="test.com">CESI</a>'},
           {image : 'img/slider-images/image02.jpg', title : '<div class="slide-content">Responsive Design</div>', thumb : '', url : ''},
           {image : 'img/slider-images/image03.jpg', title : '<div class="slide-content">FullScreen Gallery</div>', thumb : '', url : ''},
           {image : 'img/slider-images/image04.jpg', title : '<div class="slide-content">Showcase Your Work</div>', thumb : '', url : ''}  
         ],

  // Theme Options      
  progress_bar   : 1,   // Timer for each slide       
  mouse_scrub    : 1

 });

}

所以我想要的是用PHP从DB读取数据，这是图像路径，并将其作为值传递给滑块expecialy至此部分：

  slides      :   [  
           {image : '<?php echo $image_path_dynamic; ?>', title : '<div class="slide-content">Responsive</div>', thumb : '', url : ''},
         ],

我想从索引页面传递变量。

Answer 1

将php变量传递给javascript有两种方法。

• 创建一个端点，您可以使用XHTMLRequest或某些框架进行访问。
• json_encode变量，然后回显它。 Javascript能够解析json，这很酷。 （一个很酷的软件包，可以帮助您采用这种方法： https : //github.com/laracasts/PHP-Vars-To-Js-Transformer ）

Answer 2

我不知道它是否会工作，因为我自己无法测试它，但这就是我要做的。 在功能内部，您可以添加对$ .post方法的调用，应如下所示：

var imagesArray;
$.post('imagesRetriever.php', function(echoedValue){ imagesArray= jQuery.parseJSON(echoedValue); });

您的imagesRetriever.php应该看起来像：

<?php
$db = new mysqli('localhost', 'user' ,'password', 'dbname'); 

    ...some code here..

    $array = ..build the array with the data you need as a php array...;

    echo json_encode($array);
}?>

然后在$ .supersized内部，您可以访问var imagesArray，该数组现在包含所需的数据并表现为普通的jQuery数组，这意味着您可以使用所有已知的方法在jQuery中使用数组。 我认为您可以遍历数组的每个元素并构建一个新元素以放入“幻灯片”中。