Нужна помощь в изучении ajax, получении данных из mysql

Question

У меня есть сценарий ajax, который я понимаю, но мне все еще нужна дополнительная помощь.

$('.images').click(function(){
    var imageId = $(this).attr('id');
    alert(imageName);
    $.ajax({
            type: "get",
            url: "imageData.php",
            dataType: "json",
            data: {getImageId: imageId},
            error: function() {
                alert("error");
            },
            success: function(data){
                alert(imageId);
                $("#images_"+imageId).html(data);
            }
        });
    //$('#images_'+imageId).toggle();

});

У меня есть этот код, он идет в этот файл imageData.php

<?php
if(isset($_GET)){
    $images = "";
    $path = 'img/';
    $imageId = $_GET['getImageId'];
    $sql = mysql_query("SELECT * FROM images WHERE iID = '".$imageId."'");
    while($row = mysql_fetch_array($sql)){
        $images .= $path.$row['images'];
}
    $json = json_encode($images);
?>
<img src='<?php echo $json;?>'/>

    <?php
}
    ?>

Почему выдается ошибка, когда я пытаюсь отобразить строку из $ images, но выводится правильно, когда я echo $imageId;? Я пытаюсь вывести что-то из mysql, но не пытаюсь вывести только идентификатор.

Нужна помощь, пожалуйста, спасибо

Answer 1

Здесь вам не нужно использовать json_encode, нет данных, которые должны быть в формате JSON.Также нет причин циклически повторять набор результатов, если запрос возвращает только одно изображение.

Попробуйте это:

<?php
if(isset($_GET['getImageId'])) {
    $path = '';
    $imageId = mysql_real_escape_string($_GET['getImageId']); // SQL injection!
    $result = mysql_query("SELECT images FROM images WHERE iID = '".$imageId."'");
    $row = mysql_fetch_array($result);
    if($row) {
        $path = 'img/' . $row['images'];
    }
}
?>
<?php if($path): ?>
    <img src='<?php echo $path;?>'/>
<?php endif; ?>

Если iID на самом деле является целым числом, вам нужночтобы пропустить одинарные кавычки в запросе.

Вы также должны изменить dataType с json на html, так как вы возвращаете тег изображения (HTML), а не JSON :

$.ajax({
    type: "get",
    url: "imageData.php",
    dataType: "html",
    data: {getImageId: imageId},
    error: function() {
        alert("error");
    },
    success: function(data){
        $("#images_"+imageId).html(data);
    }
});

---

Другой вариант - вернуть только текст (ссылку) и создать изображения на стороне клиента:

<?php
if(isset($_GET['getImageId'])) {
    $path = '';
    $imageId = mysql_real_escape_string($_GET['getImageId']); // SQL injection!
    $result = mysql_query("SELECT images FROM images WHERE iID = '".$imageId."'");
    $row = mysql_fetch_array($result);
    if($row) {
        echo 'img/' . $row['images'];
    }
}
?>

И в JavaScript:

$.ajax({
    type: "get",
    url: "imageData.php",
    dataType: "text",
    data: {getImageId: imageId},
    error: function() {
        alert("error");
    },
    success: function(data){
        $("#images_"+imageId).html('<img src="' + data + '" />');
    }
});

Answer 2

Поскольку вы можете получить много изображений, потому что вы используете цикл while, вы, вероятно, захотите сделать это следующим образом:

в php:

$x = 0;
$another = array();
while($row = mysql_fetch_array($sql)){
    $another[$x] = $path.$row['images'];
    $x++;
}

echo json_encode($another);

и в jquery (в вашем обратном вызове успеха):

$.each(data, function(i, v){
    // Do the image inserting to the DOM here v is the path to image
    $('#somelement').append('<img src="'+v+'"');
});

Answer 3

Для вывода изображения необходимо установить атрибут src тега изображения, если он у вас уже есть, или вы можете создать его на лету.Смотрите здесь, как это сделать> jQuery document.createElement эквивалент?