从外部源解析JSON

Question

是否有任何可能的方式从其他网址获取json文件。 我想解析这个网址到我的网站http://cricapi.com/api/cricket?apikey=TESTKEY0273。

Answer 1

你可以打API直接。无需制作jsonp请求。该域名已经有Access-Control-Allow-Origin:*头意味着你可以直接与任何域的API交互。不会涉及跨域问题。

这是普通的JavaScript解决方案。如果您使用jQuery，则可以直接使用$.get或$.ajax函数。

var xhr = new XMLHttpRequest(); 
 
xhr.open("GET", "https://cricapi.com/api/cricket?apikey=TESTKEY0273", true); 
 
xhr.onload = function (e) { 
 
    if (xhr.readyState === 4) { 
 
    if (xhr.status === 200) { 
 
     var dataRec = JSON.parse(xhr.responseText); 
 
     showData(dataRec); 
 
    } else { 
 
     console.error(xhr.statusText); 
 
    } 
 
    } 
 
}; 
 
xhr.onerror = function (e) { 
 
    console.error(xhr.statusText); 
 
}; 
 
xhr.send(null); 
 

 
function showData(list){ 
 
    list.data.forEach(function(v){ 
 
    
 
    var div = document.createElement('div'); 
 
    div.style.border = "1px solid"; 
 
    div.style.padding = "10px"; 
 
    var span = document.createElement('span'); 
 
    span.innerText = "Title : " + v.title; 
 
    div.appendChild(span); 
 
    var elem = document.getElementById("match"); 
 
    elem.appendChild(div); 
 
    
 
    }); 
 
}

<div id="match"> 
 
Matchs : 
 

 

 
</div>

Answer 2

如果你可以使用jQuery，你可以使用方法getJSON。

$.getJSON("https://cricapi.com/api/cricket?apikey=TESTKEY0273", 
 
    function(data) { 
 

 
    data.data.forEach(function(item) { 
 
     for (var key in item) { 
 
     $("#content").append($("<div />").append("<span>" + key + ": </span>").append(item[key])); 
 
     } 
 
     $("#content").append("<hr />"); 
 
    }); 
 
    });

#content>div { 
 
    margin-bottom: 10px; 
 
} 
 

 
#content span { 
 
    font-weight: bold; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="content"> 
 
</div>