2012-01-09 138 views
0
我有我的JSON問題

檢索到的數據請到通過整個代碼JSON響應數據

這是我的MySQL表:

mysql> select imgurl from images where family="shoes"; 
+-------------------------------+ 
| imgurl      | 
+-------------------------------+ 
| images/zara/shoes/thumbnail | 
| images/hermes/shoes/thumbnail | 
| images/hermes/shoes/thumbnail | 
| images/hermes/shoes/thumbnail | 
+-------------------------------+ 

從上表IM檢索圖像的URL與這個jQuery代碼:

$(document).ready(function() { 
    $('ul.sub_menu a').click(function() { 
      $('#sliderid, .prodcls').fadeOut(4000); 
       var txt = $(this).text(); 
       $.ajax({ 
        type: 'POST', 
        url: 'thegamer.php', 
        data: {send_txt: txt}, 
        datatype:'json', 
        success: function(data){ 
         $('#pgwrapid').html(data); 
        } 
     }); 
    }); 
}); 

這是PHP代碼,其從jQuery AJAX請求得到:

<?php 
//Credentials 
$server = "localhost"; 
$user = "root"; 
$db = "lemonx"; 

//Connect 
$link = mysql_connect($server, $user); 
//Select database 
mysql_select_db($db, $link); 

//Assemble query 
$family = mysql_real_escape_string($_REQUEST['send_txt'], $link); 
$query = "SELECT imgurl FROM images WHERE family='$family'"; 

//Query database 
$result = mysql_query($query, $link); 

//Output result, send back to ajax as var 'response' 

$imgurl=array(); 
$i=0; 
if(mysql_num_rows($result) > 0){ 
    //Fetch rows 
    while($row = mysql_fetch_array($result)){ 
     $imgurl[$i] = $row['imgurl']; 
     //echo $imgurl[$i]; 
     $i+=1; 
     } 
} 
echo json_encode($imgurl); 

?> 

現在,會發生什麼,這是輸出在下面的jQuery選擇:

$('#pgwrapid').html(data); 

輸出

["images\/zara\/shoes\/thumbnail","images\/hermes\/shoes\/thumbnail","images\/hermes\/shoes\/thumbnail"] 

我的問題是:

  1. 爲什麼反斜槓這裏?
  2. 是否有任何代碼遍歷上面的輸出,並提取每個路徑,並將其插入圖像標籤是這樣的:

    $('#pgwrapid').append("&lt;img src='"imagepath"' alt='Thumbnail'/&gt;"); 
    

代碼將是有用的。

+0

不知道反斜槓是怎麼回事,但就創建新''元素而言,如果data是一個數組,然後使用'for'循環或jQuery [泛型迭代器函數'$。 each()'](http://api.jquery.com/jQuery.each/)每次處理一個數組的元素。 – nnnnnn 2012-01-09 04:46:07

+0

我用alert(typeof(data))檢查了它;它給出字符串 – sajid 2012-01-09 04:49:42

+0

你有一堆已經回答的問題,顯然對你有幫助,但是你沒有[接受](http://u.sbhat.me/t6SXUH)。其他人也許不會傾向於幫助你。 – Sathya 2012-01-09 04:59:56

回答

0

斜線預計會漏掉,並且在http://json.org的每個規範中都有效。請注意,即使僅通過使用Firebug:

"images\/zara\/shoes\/thumbnail" 

計算結果爲:

"images/zara/shoes/thumbnail" 

...所以這沒有什麼可擔心。

是的,您可以使用新的瀏覽器中的標準for循環或Array.forEach函數遍歷每個元素,並簡單地爲結果中返回的每個縮略圖調用附加函數。

+0

我用alert(typeof(data))檢查了它;它現在給字符串如何循環該字符串或將其轉換爲數組 – sajid 2012-01-09 04:50:52

+0

@sajid - http://api.jquery.com/jQuery.parseJSON/ – ziesemer 2012-01-09 04:51:52

+0

我解析它像這樣var object = $ .parseJSON(data);然後打印$('#pgwrapid')。html(object。[0]);但是在控制檯 – sajid 2012-01-09 05:04:23

0

data您從PHP代碼中收到的是一個包含JSON的字符串 - 而PHP JSON轉義了斜線 - 這是有效的。

您需要的JSON字符串解碼等等,如改變

$('#pgwrapid').html(data); 

var listofshoes = JSON.parse(data); // note this the data you were having in .html(data) 
for (var i in listofshoes) { 
    $('#pgwrapid').append($("<p>").text(listofshoes[i])); 
} 

的東西,你將獲得附加數據的列表 - 沒有更多的工作,使它是一個可點擊的圖像,但你知道下一步該做什麼:-)

+0

我的控制檯給解析錯誤JSON.parse:意外的字符[Break On This Error] return window.JSON.parse(data); – sajid 2012-01-09 05:14:17

+0

使用jQuery ajax調用它應該自動解析JSON,假設它實際上是有效的JSON。問題中的代碼將數據類型設置爲'json'。 – nnnnnn 2012-01-09 06:12:16

0

你的ajax調用有兩個錯誤:

- method: 'post' (instead of type: 'POST') 
- dataType: 'json' (instead of datatype:'json') 

之後,你應該檢查答案。然後編寫一個循環,在您想要的位置創建圖像元素。