Nhận tệp JSON từ URL và hiển thị

Question

Mã rất đơn giản, tôi không biết tại sao nó không hoạt động.

Đây là liên kết đến tập tin JSON, http://webapp.armadealo.com/home.json

Đây là đoạn mã sử dụng getJSON

$.getJSON("http://webapp.armadealo.com/home.json", function(data){ 
alert(data); 
}); 

Tôi chỉ muốn mã để hiển thị toàn bộ nội dung JSON.

Answer 1

Sau nhiều tháng tìm kiếm, tôi đã tìm thấy giải pháp. Do đó, tôi trả lời câu hỏi của riêng tôi.

Khi JSON không được hỗ trợ và khi chúng ta bị mắc kẹt với Chính sách xuất xứ giống nhau, chúng ta phải quấn quanh JSON của chúng ta với một đệm và làm cho nó thành JSONP.

Để làm điều đó, chúng tôi có một cuộc sống tiết kiệm website http://anyorigin.com/

Bạn có thể dán URL của bạn và nhận được tương ứng đang JQuery một cái gì đó như thế này,

$.getJSON('http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', function(data){ 
$('#output').html(data.contents); 
}); 

Nếu bạn muốn sử dụng mã của riêng bạn, sau đó chỉ sử dụng URL từ mã ở trên, là

http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=? 

URL trên đây sẽ cung cấp cho bạn dữ liệu JSON giống như JSONP và giải quyết mọi rắc rối.

tôi đã sử dụng đoạn mã sau, mà thành công gọi displayAll chức năng

$.ajax({ 
     url: 'http://anyorigin.com/get?url=http%3A//webapp.armadealo.com/home.json&callback=?', 
     type: 'GET', 
     dataType: "json", 
     success: displayAll 
    }); 

function displayAll(data){ 
    alert(data); 
} 

Answer 2

Nó sẽ hoạt động.

1. Bạn đã theo dõi yêu cầu trong firebug này hay cách khác debug console, những gì xảy ra và những gì đáp ứng được trả lại?

2. Vui lòng xem xét cùng một nguồn gốc, chính sách, do đó, tập lệnh đưa ra yêu cầu này cũng phải được tải từ webapp.armadealo.com. Nếu không, bạn cần một yêu cầu jsonp. Xem xét: http://api.jquery.com/jQuery.ajax/

Answer 3

Nếu bạn nhìn vào Chrome thanh tra, bạn có thể thấy lỗi này:

XMLHttpRequest cannot load http://webapp.armadealo.com/home.json . Origin http://stackoverflow.com is not allowed by Access-Control-Allow-Origin.

Điều này có nghĩa là máy chủ không muốn trang web của khách hàng đọc các tập tin. Khách hàng không đáng tin cậy. Đây là một tính năng bảo mật cơ bản của XMLHttpRequest nhằm ngăn chặn một trang web như mybank.evil.com tải xuống dữ liệu từ mybank.com. Thật không may làm cho thử nghiệm từ một tập tin địa phương đầy thử thách.

Nếu bạn tin tưởng bất kỳ trang web nào với dữ liệu của bạn hoặc một số trang web được chọn, bạn có thể định cấu hình tập lệnh máy chủ của mình để gửi Access-Control-Allow-Origin.

Xem https://developer.mozilla.org/en/http_access_control để biết thêm chi tiết.

Answer 4

Từ những gì tôi có thể nói là máy chủ của bạn không hỗ trợ JSONP với các yêu cầu của họ. Ví dụ:

var getUrl = 'http://webapp.armadealo.com/home.json'; 
       $.ajax({ 
        url : getUrl, 
        type : 'GET', 
        dataType : 'jsonp text', 
        jsonp: 'jsonp', 
        crossDomain : true, 
        success: function() { console.log('Success!'); }, 
        error: function() { console.log('Uh Oh!'); }, 
       }); 

Điều này có nghĩa là SyntaxError: invalid label. Sự trở lại khi bạn có nó không được định dạng đúng JSONP. Nó phải được bao bọc để hoạt động như JSONP vì jQuery yêu cầu nó.

Vì vậy, những gì bạn đang nhận được là chính xác, nhưng nó không phải là những gì bạn cần. Những gì bạn cần cho JSONP gọi sẽ trông như thế này:

functionName({ 
    "mall": { 
    "name": "South Shore Plaza", 
    "city": "Braintree", 
    "directory": "/assets/directory/0000/0094/show_floorplan.aspx", 
    "postal_code": "02184", 
    "street": "250 Granite St", 
    "lng": -71.023692, 
    "id": 147, 
    "phone": "(781) 843-8200", 
    "lat": 42.218688, 
    "state": "MA" 
} 
}); 

... vì những gì trở lại hiện nay là không hợp lệ JavaScript (bởi chính nó, và đó là nó là gì), và đó là cách JSONP hoạt động, phản ứng thực sự cần phải thực thi JavaScript.

Bạn có thể gặp lỗi tương tự bằng cách chỉ plopping mã đó ngay trong trang của bạn trong khối <script>.

Nếu bạn chỉ sau khi nhúng đoạn dữ liệu, tôi khuyên bạn nên sử dụng một plugin như jQuery-oembed để thực hiện việc đó. Nếu bạn đang sau khi dữ liệu, bạn sẽ cần một cái gì đó trên máy chủ của bạn để xử lý JSON, sau đó nhận được dữ liệu từ máy chủ của bạn sau đó.

Ví dụ:

vì vậy, giả sử chúng tôi muốn tạo một tên miền chéo bằng jQuery. Đây là cách gọi jQuery $.ajax nên hình như:

$.ajax({ 
    dataType: 'jsonp', 
    data: 'id=test', 
    jsonp: 'jsonp_callback', 
    url: 'http://www.differentdomain.com/get_data.php', 
    success: function() { 
    // do something 
    }, 
}); 

Bây giờ ở phía máy chủ (trong get_data.php tập tin), chúng ta phải có được tên gọi và gửi dữ liệu ở định dạng JSON bọc trong chức năng gọi lại. Một cái gì đó như thế này:

<?php 
$jsonp_callback = $_GET['jsonp_callback']; 
$data = array('1','2','3'); 
echo $jsonp_callback . '('.json_encode($data).');'; 
?> 

JSONP chỉ có thể được sử dụng khi và khi máy chủ nhúng đúng phản hồi trong lời gọi hàm JavaScript.