json响应数据

Question

我的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中，使用以下jQuery代码检索图像urls：

$(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);
                  } 
         });
     });
 });

这是从jQuery ajax获得请求的php代码：

  <?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(“

代码会很有用。

Answer 1

斜杠是预期的转义，并且根据http://json.org规范是有效的。请注意，即使只使用Firebug：

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

评价为：

"images/zara/shoes/thumbnail"

..。所以这没什么好担心的。

是的，您可以使用标准的for循环或新浏览器中可用的Array.forEach函数循环每个元素，只需调用结果中返回的每个缩略图的追加函数即可。

Answer 2

从PHP代码中收到的data是一个包含JSON的字符串-- PHP转义斜杠--这是有效的。

您需要解码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]));
}

您将得到附加的数据列表--使其成为可点击的图像的工作不多，但您知道下一步要做什么:-)

Answer 3

ajax调用有两个错误：

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

在这之后，你应该检查答案。并编写一个循环，在您想要的地方创建图像元素。