Question

如何使用jQuery

在以下div id="image"中显示图像

HTML：

<h3 style="clear:both" class="margin_top30">Images</h3>
            <div class="contentSection">
                <div id="image"> </div>
            </div>

jquery的：

 $(document).ready(function(){
            var id = window.location.search.substring(1);
            id = id.replace('id=','');
            var url = "http://localhost/schoollife/services/author_chapter.php?a=image&id="+id;
            //alert(url);
            $.ajax({
               url:url,
               success:function(result){
                  var obj = $.parseJSON(result);
                  var table = "<table>";
                  for (var i = 0; i < obj.length; i++) {

                     table += "<tr>"
                     table += "<td><img src='http://img/"+obj[i].image_file_name+"' style='margin-right:20px;' /></td>";

                     table += "</tr>";
                     table +="<tr><td colspan='3'>&nbsp;</td></tr>";
                  }
                  table += "</table>";
                  $("#image").html(table);

                }   
              });
            })

提前致谢。

Answer 1

你宁愿依赖$ .getJSON，因为它会让你的代码说出你想用$ .ajax实现的东西 - 从远程源检索JSON格式的数据。如果它提供有效的JSON，请检查您的服务器端代码。这是一个有效的例子：

$( document ).ready(function(){
      var url = "./author-chapter.json";
      $.getJSON( url, function( data ){
            var out = "<table>";
            $.each( data, function( i, row ) {
               out += "<tr>";
               out += "<td><img src='" + row.image_file_name + "' style='margin-right:20px;' /></td>";
               out += "</tr>";
               out +="<tr><td colspan='3'>&nbsp;</td></tr>";
            });
            out += "</table>";
            $("#image").html( out );
      });
  });

Controller（author-chapter.json）

[
  {"image_file_name": "./slides/sample_fussen.jpg"},
  {"image_file_name": "./slides/sample_keukenhof.jpg"}
]

P.S。如果你想控制异常行为 - 只需使用延迟方法 - .done，.fail而不是回调

如何使用jquery显示图像

1 个答案: