0

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

                }   
              });
            })

前もって感謝します。

4

1 に答える 1

1

$.getJSON に依存するのは、リモート ソースから JSON 形式のデータを取得するという $.ajax で達成したいことをコードに伝えるためです。また、サーバー側のコードが有効な 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 );
      });
  });

コントローラー (author-chapter.json)

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

PS例外的な動作を制御したい場合-遅延メソッドを使用するだけです-コールバックの代わりに.done、.fail

于 2013-07-15T08:02:15.443 に答える