Uzyskaj dane JSON z zewnętrznego adresu URL i wyświetl go w div jako zwykły tekst.

Question

Mam zasób zewnętrzny podobny do https://www.googleapis.com/freebase/v1/text/en/bob_dylan, który zwraca JSON. Chcę wyświetlić wartość klucza wyniku w div w html (powiedzmy, że nazwa div jest "podsumowanie"). Również wartość klucza wyniku powinna być wyświetlana w postaci zwykłego tekstu.
URL zwraca json:

{ "Wynik": „Bob Dylan, urodzony Robert Allen Zimmerman, amerykański piosenkarz, autor, poeta i malarz, który był głównym figura w muzyce popularnej przez pięć lat. Wiele z najbardziej znanych dat pracy Dylana z 1960 roku, kiedy stał się .......”}

JSON ma tylko klucz odczytu, bez innych klawiszy
Zasadniczo nie chcę używać niczego innego niż zwykły HTML i JavaScript. Jestem względnie początkującym użytkownikiem JavaScript i dlatego proszę o komentarz do kodu.

Answer 1

Można to zrobić z jsonp tak:

function insertReply(content) { 
    document.getElementById('output').innerHTML = content; 
} 

// create script element 
var script = document.createElement('script'); 
// assing src with callback name 
script.src = 'http://url.to.json?callback=insertReply'; 
// insert script to document and load content 
document.body.appendChild(script); 

Ale źródło musi być świadomy, że chcesz go funkcji przekazany jako parametr wywołania zwrotnego do niego zadzwonić.

z Google API to będzie wyglądać następująco:

function insertReply(content) { 
    document.getElementById('output').innerHTML = content; 
} 

// create script element 
var script = document.createElement('script'); 
// assing src with callback name 
script.src = 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply'; 
// insert script to document and load content 
document.body.appendChild(script); 

Sprawdź w jaki sposób dane wygląda kiedy przechodzą oddzwanianie do google api: https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply

Oto całkiem dobre wyjaśnienie jsonp: http://en.wikipedia.org/wiki/JSONP

Answer 2

Ponieważ jest to zasób zewnętrzny, który należy pobrać z JSONP z powodu Same origin policy.
Aby to zrobić trzeba dodać parametr ciągu kwerendy callback:

$.getJSON("http://myjsonsource?callback=?", function(data) { 
    // Get the element with id summary and set the inner text to the result. 
    $('#summary').text(data.result); 
}); 

Answer 3

Ponieważ żądana strona zostanie wywołana z innej domeny trzeba powrócić jsonp zamiast json.

$.get("http://theSource", {callback : "?" }, "jsonp", function(data) { 
    $('#summary').text(data.result); 
}); 

Answer 4

Możesz użyć wywołania $ .ajax, aby uzyskać wartość, a następnie umieścić ją w żądanym elemencie. Musisz wiedzieć, że nie możesz odbierać danych JSON. Musisz użyć JSONP.

Kod byłoby tak:

function CallURL() { 
    $.ajax({ 
     url: 'https://www.googleapis.com/freebase/v1/text/en/bob_dylan', 
     type: "GET", 
     dataType: "jsonp", 
     async: false, 
     success: function(msg) { 
      JsonpCallback(msg); 
     }, 
     error: function() { 
      ErrorFunction(); 
     } 
    }); 
} 

function JsonpCallback(json) { 
    document.getElementById('summary').innerHTML = json.result; 
} 

Answer 5

Oto jeden bez użycia JQuery z czystym JavaScript.Kiedyś javascript obietnic i XMLHttpRequest Można spróbować tu na tej fiddle

HTML

<div id="result" style="color:red"></div> 

JavaScript

var getJSON = function(url) { 
    return new Promise(function(resolve, reject) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('get', url, true); 
    xhr.responseType = 'json'; 
    xhr.onload = function() { 
     var status = xhr.status; 
     if (status == 200) { 
     resolve(xhr.response); 
     } else { 
     reject(status); 
     } 
    }; 
    xhr.send(); 
    }); 
}; 

getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan').then(function(data) { 
    alert('Your Json result is: ' + data.result); //you can comment this, i used it to debug 

    result.innerText = data.result; //display the result in an HTML element 
}, function(status) { //error detection.... 
    alert('Something went wrong.'); 
}); 

Answer 6

Jeśli chcesz używać zwykłego JavaScript, ale uniknąć obietnic, można użyć Rozwiązanie Rami Sarieddine, ale zastąp obietnicę taką funkcją zwrotną:

var getJSON = function(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('get', url, true); 
    xhr.responseType = 'json'; 
    xhr.onload = function() { 
     var status = xhr.status; 
     if (status == 200) { 
     callback(null, xhr.response); 
     } else { 
     callback(status); 
     } 
    }; 
    xhr.send(); 
}; 

I byłoby to nazwać tak:

getJSON('https://www.googleapis.com/freebase/v1/text/en/bob_dylan', function(err, data) { 
    if (err != null) { 
    alert('Something went wrong: ' + err); 
    } else { 
    alert('Your Json result is: ' + data.result); 
    result.innerText = data.result; 
    } 
}); 

Answer 7

Aby wyświetlić dane JSON przy użyciu Robin Hartman kod. Musisz dodać, poniższą linię.

Podany kod zawiera obiekt, obiekt. ten kod pobiera dane w lepszy sposób.

result.innerText =JSON.stringify(data);