如何将json检索数据方法更改为php

Question

我目前从这里https://blueimp.github.io/Bootstrap-Image-Gallery/找到了引导图像库

我发现他们正在使用 ajax json 方法来显示来自 flikr 网站的图像。但我目前使用 php 从数据库中检索图像。无论如何，我可以更改 ajax json 代码以从 php 中检索我的图像，而不是使用 json 方法？谢谢

这是从 flikr 检索图像的 ajax json 代码：

 // Load demo images from flickr:
    $.ajax({
        url: 'https://api.flickr.com/services/rest/',
        data: {
            format: 'json',
            method: 'flickr.interestingness.getList',
            api_key: '7617adae70159d09ba78cfec73c13be3'
        },
        dataType: 'jsonp',
        jsonp: 'jsoncallback'
    }).done(function (result) {
        var linksContainer = $('#links'),
            baseUrl;
        // Add the demo images as links with thumbnails to the page:
        $.each(result.photos.photo, function (index, photo) {
            baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' +
                photo.server + '/' + photo.id + '_' + photo.secret;
            $('<a/>')
                .append($('<img>').prop('src', baseUrl + '_s.jpg'))
                .prop('href', baseUrl + '_b.jpg')
                .prop('title', photo.title)
                .attr('data-gallery', '')
                .appendTo(linksContainer);
        });
    });

这是我打算用来从我的数据库中检索图像的示例 php 代码：

<?php

                                include 'dbConnect.php';
                                global $conn;

                                if($kiosk=='0'){
                                    $query = "SELECT * FROM M_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
                                }
                                else{
                                    $query = "SELECT * FROM I_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
                                }

                                $result = sqlsrv_query($conn,$query);

                                while( $row = sqlsrv_fetch_array ( $result, SQLSRV_FETCH_ASSOC )){
                            ?>
                            <li id="image-1" class="thumbnail">
                                <a style="background-image:url(Upload/<?php echo $row['photo_data']; ?>);background-size: 100px 100px;background-repeat: no-repeat;" title="<?php echo $row['photo_name']; ?>" href="Upload/<?php echo $row['photo_data']; ?>">
                                <img class="grayscale" src="Upload/<?php echo $row['photo_data']; ?>" alt="<?php echo $row['photo_name']; ?>" style="width:100px; height:100px" ></a>
                            </li>
                            <?php
                            }
                                sqlsrv_free_stmt($result);
                                sqlsrv_close($conn);
                            ?>

无论如何要更改 ajax 代码来实现这一点？

Answer 1

试试这个php代码：

<?php
include 'dbConnect.php';
global $conn;

if($kiosk=='0') {
    $query="SELECT * FROM M_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
} else {
    $query="SELECT * FROM I_Photo WHERE photo_kiosk ='$kiosk' AND photo_deleted ='0' ORDER BY photo_name";
}

$result=sqlsrv_query($conn,$query);

while($row=sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)) {
}
$row=json_encode($row);
echo $row;
sqlsrv_free_stmt($result);
sqlsrv_close($conn);
?>

还有javascript:

<script type="text/javascript">
    $.ajax({
        url:'your php file address',
        dataType:'json'
    }).done(function(result) {
        var linksContainer=$('#links'), baseUrl;
        $.each(result, function(index,photo) {
            baseUrl='Upload/'+photo.photo_data;
            $('<a/>').append($('<img>').prop('src','Upload/'+photo.photo_data)).prop('href','Upload/'+photo.photo_data).prop('title',photo.name).attr('data-gallery','').appendTo(linksContainer);
        });
    }); 
</script>