Nhận dữ liệu JSON từ URL bên ngoài và hiển thị nó trong div dưới dạng văn bản thuần túy

Question

Tôi có tài nguyên bên ngoài tương tự như https://www.googleapis.com/freebase/v1/text/en/bob_dylan trả về JSON. Tôi muốn hiển thị giá trị của khóa kết quả trong một div trong html (cho phép nói tên của div là "tóm tắt"). Ngoài ra giá trị của khóa kết quả sẽ được hiển thị ở dạng văn bản thuần túy.
URL trả về json:

{ "kết quả": "Bob Dylan, sinh Robert Allen Zimmerman, là một người Mỹ ca sĩ-nhạc sĩ, tác giả, nhà thơ và họa sĩ, những người đã được một nhân vật quan trọng trong âm nhạc phổ biến cho năm thập kỷ. Phần lớn nhất ngày làm việc nổi tiếng Dylan từ những năm 1960, khi ông trở thành một ......."}

các JSON chỉ có phím kết quả, không có phím khác
Về cơ bản, tôi không muốn sử dụng bất kỳ thứ gì ngoài HTML và JavaScript thuần túy. Tôi là một người mới bắt đầu tương đối với JavaScript và do đó tôi yêu cầu mã nhận xét.

Answer 1

Bạn có thể làm điều này với JSONP như thế này:

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

Nhưng nguồn phải lưu ý rằng bạn muốn nó gọi hàm truyền như tham số callback với nó.

Với google API nó sẽ trông như thế này:

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

Kiểm tra cách dữ liệu trông giống như khi bạn vượt qua callback để google api: https://www.googleapis.com/freebase/v1/text/en/bob_dylan?callback=insertReply

Dưới đây là khá lời giải thích tốt JSONP: http://en.wikipedia.org/wiki/JSONP

Answer 2

Vì đây là tài nguyên bên ngoài, bạn cần phải đi với JSONP vì Same origin policy.
Để làm điều đó bạn cần phải thêm tham số chuỗi truy vấn 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

Kể từ khi trang mong muốn sẽ được gọi từ một tên miền khác nhau mà bạn cần phải trả lại jsonp thay vì một json.

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

Answer 4

Bạn có thể sử dụng $ .ajax để nhận giá trị và sau đó đặt nó vào div bạn muốn. Một điều bạn phải biết là bạn không thể nhận dữ liệu JSON. Bạn phải sử dụng JSONP.

Mã sẽ là như thế này:

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

Dưới đây là một mà không sử dụng JQuery với JavaScript tinh khiết.Tôi đã từng hứa hẹn javascript và XMLHttpRequest Bạn có thể thử nó ở đây về vấn đề này 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

Nếu bạn muốn sử dụng javascript đơn giản, nhưng tránh những lời hứa, bạn có thể sử dụng Giải pháp của Rami Sarieddine, nhưng thay thế lời hứa bằng chức năng gọi lại như sau:

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

Và bạn sẽ gọi nó là như thế này:

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

Để hiển thị dữ liệu JSON sử dụng Robin Hartman mã. Bạn cần phải thêm, dòng dưới đây.

Mã ông đã cung cấp cho bạn đối tượng, đối tượng. mã này truy xuất dữ liệu theo cách tốt hơn.

result.innerText =JSON.stringify(data);