需要幫助學習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 
} 
    ?> 

爲什麼，當我嘗試從$圖像呼應的字符串，但它正確輸出，當我做輸出誤差echo $imageId;？我試圖從MySQL輸出的東西，但沒有試圖輸出只是ID。

需要幫助，請，謝謝

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 equivalent?