javascript - 使用 ajax 响应显示多个图像

Question

我试图在一个页面上显示来自远程服务器的多个图像，该页面是一个 html 文件，其中放置 php block 不会做任何事情来获得我想要的东西

使用 PHP 5.6 版本，php 代码为

$dir = "uploads/image/dashed/";
$files = scandir($dir);
foreach ($files as $file)
{
if ( is_file($dir. $file) ){
    echo $file;
    }
}

ajax响应代码是:

    $(document).ready(function(){
        $.ajax({
            async: true,
            type: 'POST',
            url: 'folder.php',
            success: function(data){
               $("#imageContent").html(data).append("<br/>");
               var images = data.split("\n");
                for (var i = 0, j = images.length; i < j; i++){
                   $("#imageContent").append("<img src='uploads/image/dashed/" + images[i] + "' width='300'>"); 
                }
            }
        });
});

我从服务器得到的只是 1354876944ABF.jpg_MG_0085.jpg 和一个空的图像占位符(不是两个，只是一个)用于放置图像 并且图像地址显示两个图像名称粘在一个链接中

uploads/image/dashed/1354876944ABF.jpg_MG_0085.jpg

其中响应​​链接应位于两个(对于本示例)不同的行和图像，其中 <img>位于ajax调用内的html上

Answer 1

试试这个，

$dir = "uploads/image/dashed/";
$files = scandir($dir);
$i = 1;
$count = count($files);
foreach ($files as $file){

if(is_file($dir. $file)){
if($i == $count){
echo $file;
}else{echo $file.'|||';
   }
  }
$i++;}

并将 ajax 更改为:

$(document).ready(function(){
    $.ajax({
        async: true,
        type: 'POST',
        url: 'folder.php',
        success: function(data){
           $("#imageContent").html(data).append("<br/>");
           var images = data.split("|||");
            for (var i = 0, j = images.length; i < j; i++){
               $("#imageContent").append("<img src='uploads/image/dashed/" + images[i] + "' width='300'>"); 
            }
        }
    });
});

即使用 ||| 作为分隔符。

编辑:现在它应该可以正常工作， 编辑2:更改了$i = 0顺序，在末尾添加了$i++;