Pytanie Jak dodać lokalny plik json w jsfiddle?


Jak mogę dodać plik JSON w jsfiddle? Mam plik JSON, ale nie mogę go dołączyć w jsfiddle. Mogę utworzyć obiekt JSON i użyć go, ale czy istnieje sposób na dodanie zewnętrznego pliku JSON do skrzypiec?


15
2017-07-23 12:57


pochodzenie


Co masz na myśli, dodać plik JSON? - Ed Cottrell♦
Podobnie jak w jsfiddle zewnętrzne źródło możemy dodać link do zewnętrznego css anh js. Podobnie jest jakikolwiek sposób, aby dodać link do pliku json, który mam ze mną. - Roshan


Odpowiedzi:


Możesz wykorzystać moc Współdzielenie zasobów krzyżowych (CORS) aby osiągnąć swoje zadanie.

Zasadniczo, jak działa CORS, jest to, że jeśli Access-Control-Allow-Orign nagłówek jest ustawiony w odpowiedzi HTTP, wtedy zawartość załadowana przez AJAX może być użyta w naszym skrypcie, niezależnie od tego, czy znajduje się w tej samej domenie, czy w innej.

Teraz dla twojego celu możesz przesłać swój lokalny plik JSON do Dropbox Public i uzyskaj publiczny URL, który możesz załadować za pomocą prostego wywołania AJAX.

Wywołanie AJAX zakończy się powodzeniem, ponieważ Dropbox ustawia w odpowiedzi następującą wartość Access-Control-Allow-Orign:* co oznacza, że ​​dowolna domena może korzystać z załadowanej treści.

Kod Jquery będzie podobny do tego (możesz nawet użyć czystego JavaScriptu, jeśli wolisz).

var url = 'https://dl.dropboxusercontent.com/u/94145612/example.json';
var myJsonData= {};
$.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'json',
    success: function (data) {
        alert('success');
        console.log(data);
        myJsonData= data;
    },
    error: function (e) {
        alert('error');
        console.log(e);

    }
});

Przykład JSFiddle


12
2017-07-24 07:08



Konta Dropbox utworzone po 4 października 2012 r. Nie mają już folderu publicznego. Link, który teraz udostępnia Dropbox w celu udostępniania treści, nie działa. Jakieś sugestie? - MERose


Myjson.com dostarcza api, który działa w Jsfiddle.net.

Zwyczaj mój myjson:

// Loading JSON  with CROS

var url = 'https://api.myjson.com/bins/3ko1q';
$.ajax({
    type: 'GET',
    url: url,
    async: false,
    contentType: "application/json",
    dataType: 'json',
    success: function (data) {
        alert('success');
        console.log(data);
    },
    error: function (e) {
        alert('error');
        console.log(e);

    }
});

Myjson GET Przykład:

// 1. Create valid uri via POST
// 2. GET using newly created uri

var obj = {
    "key": "value",
    "key2": "value2"
};
var data = JSON.stringify(obj);

$("#clickMe").click(function () {
    $.ajax({
        url: "https://api.myjson.com/bins",
        type: "POST",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, textStatus, jqXHR) {

            // load created json
            $.get(data.uri, function (data, textStatus, jqXHR) {
                var json = JSON.stringify(data);
                $("#data").val(json);
            });

        }
    });
});

11
2017-07-07 09:32



To było idealne. Tak łatwo. - Charles Clayton


Na podstawie Twojego komentarza chcesz użyć czystego pliku JSON jako zewnętrznego zasobu w jsFiddle. Nie możesz tego zrobić, ponieważ czysty JSON nie jest JavaScriptem. Powiedz, że próbujesz to uwzględnić http://example.com/foo.json jako zasób zewnętrzny, a plik ten zawiera:

{"foo":"bar"}

Spowoduje to Uncaught SyntaxError: Unexpected token :, ponieważ obiekt JSON nie jest prawidłowy JavaScript sam.

Ale jeśli przypiszesz obiekt JSON do zmiennej, na przykład:

var foo = {"foo":"bar"};

wtedy nie ma problemu.

Rozwiązanie: użyj zmodyfikowanej wersji pliku, aby zainicjować zmienną do użycia w jsFiddle.


1
2017-07-24 03:27



Co jest ze sprawą? - Ed Cottrell♦