Javascript 使用ajax响应显示多个图像

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

使用PHPVersion5.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'>"); 
                }
            }
        });
});

$（文档）.ready（函数（）{
$.ajax({
async:true，
键入：“POST”，
url:'folder.php'，
成功：功能（数据）{
$（“#imageContent”）.html（数据）。追加（
）；
var images=data.split（“\n”）；
对于（var i=0，j=images.length；i

我从服务器上得到的只是 1354876944ABF.jpg_MG_0085.jpg 还有一个空的图像占位符（不是两个，只有一个）用于放置图像 图像地址显示在一个链接中粘在一起的两个图像名称

上传/image/虚线/1354876944ABF.jpg_MG_0085.jpg

如果响应链接应该位于两个不同的行和图像上（在本例中），而ajax调用中的html上有

，请尝试这样做

$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'>"); 
            }
        }
    });
});

$（文档）.ready（函数（）{
$.ajax({
async:true，
键入：“POST”，
url:'folder.php'，
成功：功能（数据）{
$（“#imageContent”）.html（数据）。追加（
）；
var images=data.split（“| | |”）；
对于（var i=0，j=images.length；i

这就是使用

| |

作为分隔符

编辑：现在应该可以正常工作了， EDIT2:更改了

$i=0

顺序，添加了

$i++在结尾
试试这个

$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'>"); 
            }
        }
    });
});

$（文档）.ready（函数（）{
$.ajax({
async:true，
键入：“POST”，
url:'folder.php'，
成功：功能（数据）{
$（“#imageContent”）.html（数据）。追加（
）；
var images=data.split（“| | |”）；
对于（var i=0，j=images.length；i

这就是使用
| |
作为分隔符

编辑：现在应该可以正常工作了，
EDIT2:更改了
$i=0
顺序，添加了
$i++在结尾
scandir（）
已经为您提供了一个数组，那么为什么不直接对它进行json编码并返回它呢<代码>取消设置（）
任何无效文件的输出：

$files = scandir($dir);
$count = count($files);

for($i = 0; $i < $count; $i++) {
    if ( !is_file($dir. $file) ){
        unset($files[$i]);        
    }
}

echo json_encode($files);

$files=scandir（$dir）；
$count=计数（$files）；
对于（$i=0；$i<$count；$i++）{
如果（！is_文件（$dir.$file））{
未设置（$files[$i]）；
}
}
echo json_编码（$files）；

然后在你的成功块中：

success: function(data){
           $("#imageContent").html(data).append("<br/>");
           var i,
               json = JSON.parse(data);          
           for (i in json){
               $("#imageContent").append("<img src='uploads/image/dashed/" + json[i] + "' width='300'>"); 
            }
        }

成功：函数（数据）{
$（“#imageContent”）.html（数据）。追加（
）；
var i，
json=json.parse（数据）；
for（我使用json）{
$（“#图像内容”）。追加（“”）；
}
}
scandir（）
已经为您提供了一个数组，那么为什么不直接对其进行json编码并返回此数组呢<代码>取消设置（）

任何无效文件的输出：

$files = scandir($dir);
$count = count($files);

for($i = 0; $i < $count; $i++) {
    if ( !is_file($dir. $file) ){
        unset($files[$i]);        
    }
}

echo json_encode($files);

$files=scandir（$dir）；
$count=计数（$files）；
对于（$i=0；$i<$count；$i++）{
如果（！is_文件（$dir.$file））{
未设置（$files[$i]）；
}
}
echo json_编码（$files）；

然后在你的成功块中：

success: function(data){
           $("#imageContent").html(data).append("<br/>");
           var i,
               json = JSON.parse(data);          
           for (i in json){
               $("#imageContent").append("<img src='uploads/image/dashed/" + json[i] + "' width='300'>"); 
            }
        }

成功：函数（数据）{
$（“#imageContent”）.html（数据）。追加（
）；
var i，
json=json.parse（数据）；
for（我使用json）{
$（“#图像内容”）。追加（“”）；
}
}

您正试图按换行符拆分，但您的

回送

没有回送换行符好的，我尝试在回送语句末尾使用
，它确实拆分了行，但不显示图像，因为它仍然是相同的

不是

\n

，这是公平的，但是因为我还不是一个

\n

而不是

。然后PHP和JavaScript使用匹配的字符。您试图按换行符拆分，但是您的

echo

没有回显换行符好的，我尝试在echo语句的末尾使用th
，它确实将行拆分，但不显示图像，因为它仍然是相同的

不是

\n

，这是公平的，但是因为我还不是一个

\n

而不是

。然后PHP和JavaScript使用匹配的字符。太棒了，但是它在endNope处留下了一个额外的图像标记，浏览器中的控制台找不到图像检查浏览器控制台中图像的路径只尝试了第二次编辑的图像，显示图像，但不更改编码在第二次编辑中更改了有关i++的代码，但在displayBrilliant中没有更改，但在endNope处留下了一个额外的图像标记，浏览器中的控制台找不到图像检查浏览器控制台中图像的路径请尝试第二次编辑的图像，显示图像，但不更改编码在第二次编辑中更改了有关i++的代码，但不更改显示