通过AJAX+PDO+PHP点击按钮遍历JSON数组显示Base64图片异常

看起来你现在的核心问题是：每次点击按钮都会重新发起AJAX请求，导致每次都从数组的第一个元素开始渲染，没法切换到下一张。咱们可以通过维护全局索引变量和缓存图片数据的方式来解决，具体方案如下：

步骤1：重构代码，加入缓存与索引跟踪 #

把图片数据和当前显示的索引放在AJAX请求外部，这样每次点击都能复用已获取的数据，而不是从头开始：

$(function () {
    // 全局变量：缓存从API获取的图片数组，记录当前显示的索引
    let imageList = [];
    let currentIndex = 0;

    $('#getimg1').on('click', function () {
        // 先判断是否已经获取过图片数据
        if (imageList.length === 0) {
            $.ajax({
                type:'GET',
                dataType: 'json',
                url: 'http://testing/api/getimg',
                success:function(getinfo){
                    // 缓存获取到的图片数组
                    imageList = getinfo;
                    // 渲染第一张图片
                    renderTargetImage(currentIndex);
                    // 索引自增，为下次点击做准备
                    currentIndex++;
                },
                error:function(){
                    alert('获取图片数据失败，请稍后重试');
                }
            });
        } else {
            // 已有缓存数据，直接切换下一张
            if (currentIndex >= imageList.length) {
                // 可选逻辑：到最后一张后回到开头循环展示
                currentIndex = 0;
            }
            renderTargetImage(currentIndex);
            currentIndex++;
        }
    });

    // 封装渲染图片的函数，统一处理逻辑
    function renderTargetImage(index) {
        // 假设你用来展示图片的容器是#image-display，请根据实际DOM结构修改
        const base64Str = imageList[index];
        // 注意：Base64图片需要加上对应格式的前缀，比如jpeg格式就加data:image/jpeg;base64,
        $('#image-display').html(`<img src="data:image/jpeg;base64,${base64Str}" alt="遍历展示图片">`);
    }
});

关键改进点说明 #

• 缓存图片数据：第一次请求API后把所有Base64图片数据存在imageList里，后续点击不再重复请求API，既提升性能也避免每次从头遍历。
• 全局索引跟踪：用currentIndex记录当前显示的图片位置，每次点击后自增，到数组末尾可以重置为0实现循环展示。
• 渲染逻辑封装：把渲染图片的代码抽成独立函数，避免重复代码，后续修改展示样式或DOM元素时也更方便。

额外适配提示 #

• 如果你的API返回的是包含Base64字段的对象数组（比如[{imgBase64: "xxxx"}, ...]），那在renderTargetImage里要改成imageList[index].imgBase64。
• 如果不需要循环展示，而是到最后一张后禁用按钮，可以在else分支里添加判断：

  if (currentIndex >= imageList.length) {
      $('#getimg1').prop('disabled', true).text('已展示所有图片');
      return;
  }
  

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