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 |
+-------------------------------+

从上表我用这个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);
                  } 
         });
     });
 });

这是从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"]

我的问题是：

为什么反斜杠在这里？
是否有任何代码循环上面的输出并提取每个路径并将其插入到图像标记中，如下所示：
```
   $('#pgwrapid').append("&lt;img src='"imagepath"' alt='Thumbnail'/&gt;");
```

代码很有用。

Answer 1

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

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

评估为：

"images/zara/shoes/thumbnail"

......所以这没什么值得关注的。

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

Answer 2

您从PHP代码收到的data是一个包含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]));
}

您将获得附加数据的列表 - 没有太多工作可以使其成为可点击的图像，但您知道下一步该做什么： - ）

Answer 3

您的ajax调用有两个错误：

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

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

json响应数据

3 个答案: