在json输出上锻炼

时间:2012-01-14 07:30:19

标签: jquery json

亲爱的我得到以下输出

["images\/zara\/shoes\/thumbnail\/1.png","images\/zara\/shoes\/thumbnail\/2.png"] 

通过此代码

    $imgurl=array();
$i=0;
if(mysql_num_rows($result) > 0){
    //Fetch rows
    while($row = mysql_fetch_array($result)){

        $imgurl[$i]=$row['imgurl'];
        //echo "<img src='$imgurl[$i]' />";
        $i+=1;
        }
}
echo json_encode($imgurl); 

现在在jquery结束时我抓住这段代码并显示但我想在输出上操作一个循环创建新的img标签并在新的img src中插入每个图像路径“”

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

任何代码都是有用的

1 个答案:

答案 0 :(得分:0)

这是成功所需的代码:

success: function(data) {
  // data contains an array of strings, each with the src for your img
  var maincontent = $('#main-content');
  for (var i=0; i<data.length; i++) {
    var img = $('<img />');
    img.attr('src', data[i]);
    maincontent.append(img);
  }
}

当然,还有很多其他方法可以进行循环。

这是一个填充文档加载主要内容的完整示例:

  <html>
    <head>
      <script src="js/jquery.js" ></script>
      <script language="javascript">
      $(function() {
           var txt = "test";
           $.ajax({
             type: 'POST',
             url: 'data.json',
             data: {send_txt: txt},
             dataType:'json',
             success: function(data) {
                        var maincontent = $('#main-content');
                        for (var i=0; i<data.length; i++) {
                          var img = $('<img />');
                          img.attr('src', data[i]);
                          maincontent.append(img);
                        }
                      },
             error: function(jqXHR, textStatus, errorThrown) { alert(textStatus); }
            });
        });

      </script>
    </head>
  <body>
  <div id="main-content"></div>
  </body>
  </html>

顺便说一下,我认为ajax请求中的datatype变量应为dataType,且大写为T.

总是总是在ajax调用上提供错误功能是一个好主意,否则很难知道是否出现了问题。我的data.json包含您在上面提供的输出字符串。当然,我的浏览器中的图像链接已被破坏,但如果图像位于正确的位置,它们将对您有效。