php - 如何使用jquery显示图像

Question

如何id="image"使用 jQuery在以下 div 中显示图像

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

控制器（作者-chapter.json）

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

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