尝试从git存储库中提取json格式的数据

我是初学者，试图学习ajax并使用json文件。我想使用JSON格式的数据。但我的请求的结果是一个空的文本。 更新：这里是我的一段代码：尝试从git存储库中提取json格式的数据

var quoteContainer=document.getElementById("random-quote"); 
var btn=document.getElementById("btn"); 
btn.addEventListener("click",function(){ 
    var myRequest=new XMLHttpRequest(); 

    myRequest.open("GET","https://raw.githubusercontent.com/4skinSkywalker/Database-Quotes-JSON/master/quotes.json",true); 
    myRequest.addEventListener('load', function() { 
     var myData=JSON.parse(myRequest.responseText); 
     console.log(myRequest.responseText); 
     renderHTML(myData); 
    }); 
    myRequest.send(); 
}); 


function renderHTML(data){ 
    var LenJson=data.length; 
    var Num=Math.random()*LenJson; 
    console.log(Num); 
    var QuoteString="<p id='quote-text'>"+data[i].quoteText+"</p>" 
    var AuthorString="<p id='quote-author'>"+data[i].quoteAuthor+"</p>" 
    quoteContainer.insertAdjacentHTML('beforeend',QuoteString); 
    quoteContainer.insertAdjacentHTML('beforeend',AuthorString); 
}

它仍然不返回任何数据。为什么？

来源

2017-06-14 Dalek

任何机会尝试使用运行此掀起了本地文件你'文件：//'...？ –

@PatrickRoberts我使用'brackets'作为文本编辑器，它在'chrome'浏览器中运行代码。那么，正如我所说我刚开始学习'javascript'，我可能会做错事。 – Dalek

[Chrome浏览器出现意外存在的文件URL跨域问题]的可能重复（https://stackoverflow.com/questions/6060786/file-url-cross-domain-issue-in-chrome-unexpected） –

你需要send()并等待它load：

var quoteContainer = document.getElementById("random-quote"); 
 
var btn = document.getElementById("btn"); 
 

 
btn.addEventListener("click", function() { 
 
    var myRequest = new XMLHttpRequest(); 
 

 
    myRequest.open("GET", "https://raw.githubusercontent.com/4skinSkywalker/Database-Quotes-JSON/master/quotes.json", true); 
 
    
 
    myRequest.addEventListener('load', function() { 
 
    var myData = JSON.parse(myRequest.responseText); 
 

 
    renderHTML(myData); 
 
    }); 
 
    
 
    myRequest.send(); 
 
}); 
 

 
function renderHTML(data) { 
 
    var LenJson = data.length; 
 
    var Num = Math.floor(Math.random() * LenJson); 
 
    
 
    var QuoteString = "<p id='quote-text'>" + data[Num].quoteText + "</p>"; 
 
    var AuthorString = "<p id='quote-author'>" + data[Num].quoteAuthor + "</p>"; 
 
    
 
    quoteContainer.insertAdjacentHTML('beforeend', QuoteString); 
 
    quoteContainer.insertAdjacentHTML('beforeend', AuthorString); 
 
}

<button id="btn" type="button">Generate Random Quote</button> 
 
<div id="random-quote"></div>

来源

2017-06-14 18:55:18

感谢您的回答。我在我的原始代码中已经有'myRequest.send（）;'但仍然没有得到任何输出。我发布了我的整个代码。 – Dalek

@Dalek我更新了完整的代码。你有一些缺少的变量名，你忘记了将你的随机数整合在一起。当你进行调试时，请立即检查你的控制台是否有错误，它会告诉你到底什么地方有问题。我一直假定你写得很好。 –

您忘记了包含myRequest.send()，在运行open()方法后，您应该拥有该行。

来源

2017-06-14 18:53:10

尝试从git存储库中提取json格式的数据

回答

相关问题