2013-07-15 47 views
0

顯示圖像我如何使用jQuery如何使用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); 

       } 
       }); 
      }) 

謝謝提前。

+0

什麼是不工作?什麼是您使用的PHP代碼? – putvande

+3

使用''標籤......我想在你的腳本中的SRC是不正確的。因此圖像不顯示 – bipen

+0

沒有什麼錯與上面的代碼,檢查你的鏈接,你在通過'SRC' – zzlalani

回答

1

你而依靠$ .getJSON,因爲它使你的代碼說你想達到與$就什麼 - 從遠程源獲取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"} 
] 

P.S.如果你想控制異常行爲 - 只是去與遞延法 - .done,.fail代替回調