Question

我想从多个文件中检索json数据。我正在制作插件来做到这一点。在这里，我可以从一个json文件中放入数据。但是当我想从多个json文件中提取数据时，所有数据都会附加到同一个div中。如何在单独的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
    }
    ]
}

任何帮助？

Answer 1

我做了一些修改。

//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。

如何检索多个json文件到多个div？

1 个答案: