如何将多个json文件检索到多个div? [英] How to retrieve multiple json files to multiple divs?

问题描述

我想从多个文件中检索json数据.我正在做插件来做到这一点.在这里，我能够放入一个json文件中的数据.但是，当我想从多个json文件中提取数据时，所有数据都会附加到同一个div中.如何在单独的div上检索单独的文件数据? 我要调用插件的代码是:

I want to retrieve json data from multiple files. I am making plugin to do this. Here I am able to put data from one json file. But when I wanted to pull the data from multiple json files, all the data are appended to same div. What can I do to retrieve separate file data on separate div? My code to call plugin is:

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

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

我要执行此操作的插件是:

My plugin to do this is:

(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文件格式为:

After I load content on separate div, I will scroll the data using easyslider.
The json file format is:

{
"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
    }
    ]
}

有什么帮助吗?

推荐答案

我做了一些修改.

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

但是我在此插件上遇到了其他问题，我已经在此处发布了该问题.

But I am stuck with other issue on this plugin which i have posted Here.

这篇关于如何将多个json文件检索到多个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！