Question

我试图了解如何从使用JS文件内部的变量更改为使用外部JSON。我主要想使它在外部服务器上工作。我浏览了无数文章，这些文章解释了问题的一部分，但从未解释整个问题。为了清楚起见，我想解析一个JSON文件而不将其更改为任何内容或将其放入html的标头中：

如果我当前正在从这样的变量获取数据：

['A', 'B1']

我该如何更改代码以从经过验证的json文件（称为questions.json）获取变量？例如以下两个：

https://agwebdesign.net/files/JS1simplequizapp/questions.json https://raw.githubusercontent.com/AGrush/jsquizapp/master/questions.json

我尝试过： 1。

如果JSON位于同一文件中，并且我不在本地服务器上运行它：

        var allQuestions = [
            { 
                question: "Who is Prime Minister of the United Kingdom?", 
                choices: ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
                correctAnswer: 0 
            },
            {
                question: "What is your favourite colour?",
                choices: ["Green", "Brown", "Blue", "Red"],
                correctAnswer: 0
            },
            {
                question: "Who is your name?",
                choices: ["Bob", "Paul", "Andrey", "Alex"],
                correctAnswer: 0
            },
        ];


    //.................................................//

    let updateText = function(){

        // check the question is defined & exists
        if (allQuestions[questionNumber]) {
            //change the question innerHTML
            question.innerHTML = allQuestions[questionNumber].question
.......
etc...
.......

我收到错误*未定义。为什么？

我已经尝试过：2。

（同样如果我使用https://agwebdesign.net/files/JS1simplequizapp/questions.json，我也会遇到相同的错误）

import * from './questions.json'
const question = allQuestions.question;

console.log(question);

我得到了错误：

通过CORS策略阻止了对来自'null'的'file：/// C：/Users/Mr%20Bojangles/Desktop/jsquizapp/questions.json'处的XMLHttpRequest的访问：仅跨源请求协议方案支持：http，数据，chrome，chrome扩展名，https。

我尝试过3：

我尝试使用fetch API，但收到关于CORS的类似错误：

    var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        console.log("Json parsed data is: " + JSON.stringify(myObj));
    }
};
xmlhttp.open("GET", "./questions.json", true);
xmlhttp.send();

从源“空”获取“ https://agwebdesign.net/files/JS1simplequizapp/questions.json”处的访问已被CORS策略阻止：请求的资源上不存在“ Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“ no-cors”，以在禁用CORS的情况下获取资源。

有人可以告诉我一个加载该JSON文件并在控制台中记录allQuestions.question的工作示例吗？

使用Fetch API从外部文件加载JSON？

0 个答案: