2011-06-07 92 views
0

我想从多个文件中检索json数据。我正在做插件来做到这一点。在这里,我可以从一个json文件中提取数据。但是当我想从多个json文件中提取数据时,所有的数据都被追加到同一个div中。我能做些什么来检索单独的div上的单独文件数据? 我的代码调用插件是:如何检索多个json文件到多个div?

$(document).ready(function(){ 
    //$("#slider").easySlider(); 
    $(".slider1").r3dImage({ 
      url: "ajax/test.txt", 
      pause: 800 
    }); 

    $(".slider2").r3dImage({ 
     url: "ajax/test2.txt", 
     pause: 400 
    }); 
}); 

我的插件来做到这一点:

(function($){ 

    $.fn.r3dImage = function(options){ 
    var defaults = { 
     url: '', 
     pause: 2000 
    }; 

    var options = $.extend(defaults, options); 
    //retrive json file 
    //setInterval(function(){ 
     // get new json result from server by Ajax here 

     obj = $(this); 
     //var body = obj.html(); 

     $.ajax({ 
     type: "POST", 
     url: options.url, 
     dataType: "json", 
     cache: false, 
     contentType: "application/json", 
     success: function(data) { 
     //alert("Success"); 
     $.each(data.dashboard, function(i,post){ 
      html = '<li>'; 
      html += '<a href="'+post.TargetUrl+'" target="'+post.Target+'">'; 
      html += '<img src="' + post.ImageUrl + '" alt="' + post.Alt +'" title="' + post.OverlayText +'" />'; 
      html += '</a><p>'+post.OverlayText+'</p></li>'; 
     $("ul", obj).append(html); 

     }); 
     $(obj).easySlider({ 
      auto: true, 
      continuous: true 
     }); 
     }, 
     error: function(xhr, status, error) { 
      alert(xhr.status); 
     } 
     }); 
    }; 

})(jQuery); 

后,我加载在单独的DIV的内容,我会用easyslider滚动数据。
JSON文件格式是:

{ 
"dashboard": [ 
    { 
     "ImageUrl": "images/03.jpg", 
     "OverlayText": "demo image 3", 
     "TargetUrl": "http://lkamal.com.np", 
     "Target": "_blank", 
     "Alt": "Image 3", 
     "Timer ": 2000 
    }, 
    { 
     "ImageUrl": "images/04.jpg", 
     "OverlayText": "demo image 4", 
     "TargetUrl": "http://lkamal.com.np", 
     "Target": "_blank", 
     "Alt": "Image 4", 
     "Timer ": 2000 
    } 
    ] 
} 

任何帮助吗?

回答

0

我做了一些修改。

//retrive JSON feed from external file 
      $.ajax({ 
       type: "POST", 
       url: test.txt, 
       dataType: "json", 
       cache: false, 
       contentType: "application/json; charset=utf-8", 
       //beforeSend: function() { $("#slider ul").html("Saving").show(); }, 
       success: function(data) { 
       //alert("Success"); 
       html = ''; 
       $.each(data.dashboard, function(key,items) { 
        html += '<li>'; 
        html += '<a href="'+items.TargetUrl+'" target="'+items.Target+'">'; 
        html += '<img src="' + items.ImageUrl + '" alt="' + items.Alt +'" title="' + items.OverlayText +'" />'; 
        html += '</a><p>'+items.OverlayText+'</p></li>';       
       }); 
       $("ul", element).empty(); 
       $("ul", element).append(html); //appending the json data with respective div 
       //startSlides(element); //start slideshow 


       //$(options.container).easySlider({ 
       }, 
       error: function(xhr, status, error) { 
        alert(xhr.status); 
       } 
      }); 

但我坚持了这个插件,我已经发布Here等问题。