代码之家 › 专栏 › 技术社区 › style237

使用AJAX PDO PHP访问每个JSON数组元素onClick

pdo ajax arrays php

style237 · 技术社区 · 6 年前

我试图访问由MySQL查询构造的JSON数组中存储为Base64映像/blob的每个元素。

其想法是单击一个按钮,通过每个元素显示图像。

我已经让它显示第一个图像,但是当我再次单击时,下一个图像不会显示。

任何帮助都将不胜感激。

阿贾克斯:

   $(function () {
        $('#getimg1').on('click', function () {
             $.ajax({
            type:'GET',
            dataType: 'json',
            url: 'http://testing/api/getimg',
            success:function(getinfo){
                 $.each(getinfo, function(i, displayimg){

                $('#HTMLBox').prop('src','data:image/png;base64,' + displayimg.XXX ---- //Here I'm suspecting something?); 

                 });
            }
        }); 
    });  
    });

PHP:

 $sql = "SELECT img from artistlocation";

    try{
        $db = new db();
        $db = $db->connect(); 
        $stmt = $db->query($sql);
        $data = array();
        while($result = $stmt->fetch(PDO::FETCH_OBJ))    
        {
            $data[] = base64_encode($result->img);
        }
       echo json_encode($data);
    }
    catch(PDOException $e){
        echo '{"error": {"text": '.$e->getMessage().'}';
    }

我只使用了两张图片来测试这一点。

2 回复 | 直到 6 年前

Sebastian Sulinski 6 年前

因为您进行的ajax调用将返回所有图像记录,所以我认为将该数据存储在一个变量中,然后在图像中旋转,而不是每次单击都调用php代码,这样会更有效。如果您只使用jQuery,我建议您:

var images = [],
    index = 0,
    count = 0,
    max = 0;

$.getJSON("http://testing/api/getimg", function(data) {
    images = data;
    count = images.length;
    max = count - 1;
});

$('#getimg1').on('click', function() {

    if (count === 0) {
        return;
    }

    if (index === max) {
        index = 0;
    } else {
        index++;
    }

    $('#HTMLBox').attr('src', 'data:image/png;base64,' + images[index]);

});

我必须承认我没有测试它,但我相信它应该会起作用——如果你能试着看看你的表现如何。

Adam J 6 年前

所以,如果你想做一些非常脏的事情,你可以通过一个隐藏的输入跟踪你加载了多少图像。您可以在ajax成功的基础上增加这一点。然后,您可以通过AJAX将该值传递给PHP,并运行如下操作:

SELECT * FROM images LIMIT 1 OFFSET $images_already_fetched

通过传递 OFFSET 声明,您告诉它跳过那么多行。

推荐文章

James Williams · 如何在单击按钮时刷新div内容

2 年前

Atif Rizwan · 调用节点。使用AJAX的独立HTML文件的js API

2 年前

Mehmet · javascript执行了多个

2 年前

Shijil · 尝试在Jquery PHP搜索代码中添加选择标记功能

2 年前

Parker · 如何使表格行的单元格项加粗n秒?

2 年前

Chris J. · ajax获取查找数据属性值的请求

2 年前

GauravSolo · 在columndef datatable jquery中使用响应数据

2 年前

Hassaan Iqbal · 点击按钮打开网站,无需重新加载整个页面(AJAX)

2 年前

estudiante · 如何调用在tensorflow中运行的模型,该模型由ajax中的docker提供服务?

2 年前

Pedro F · Ajax调用后脚本运行不正常

2 年前