使用AJAX从$src变量获取多张图片仅返回单张的问题求助

问题原因 #

• 后端PHP代码的foreach循环中，每次都直接覆盖$src变量的值，循环结束后$src只会保留最后一张图片的地址，最终返回给前端的只有单条数据
• 前端AJAX逻辑仅处理了单条图片地址，只生成了1个img标签插入页面，自然只能展示一张图片

修复方案 #

1. 修改后端PHP代码 #

将$src改为数组类型，循环时把所有图片地址追加到数组中再返回：

// 初始化$src为空白数组
$src = [];
foreach ( $chapter['storage'][ $in_use ]['page'] as $page => $link ) {
    $host = $chapter['storage'][ $in_use ]['host'];
    // 把当前图片地址追加到数组
    $src[]  = $host . $link['src'];
}
$this->send_json( 'success', '', $src );

2. 修改前端AJAX代码 #

接收到图片地址数组后，循环生成多个img标签再插入容器：

$(function(){
    $('.entry-content .entry-content_wrap').ready(function(){
        var navigation = $('.single-chapter-select').find('option:selected').data('navigation');
        $.ajax({
            type: 'GET',
            url: manga.ajax_url + '?' + navigation,
            dataType: 'json',
            success: function(data){
                var imgLinks = data.data.data;
                console.log(imgLinks);
                var imgHtml = '';
                // 循环数组拼接所有图片标签
                imgLinks.forEach(function(link){
                    imgHtml += '<img style="margin: -6px;width: 89%;pointer-events: none;" class="wp-manga-chapter-img" src="' + link + '">';
                })
                $('.entry-content .entry-content_wrap').html(imgHtml);
            },
       })
    })
})

内容的提问来源于stack exchange，提问作者abbas