如何将外部JSON文件读取到我的html / javascript测验中

Question

我正在慢慢学习JavaScript，并正在努力建立测验。

所以我有一个非常基本的测验，请看这里

所以我的具体问题是

1. 如何将问题和答案存储在外部JSON文件中？
2. 我可以将问题和答案存储在其他文件类型（例如CSV文件）中吗？

也许我应该拥有一个可以获取我的问答的功能：

function getQuestions() {

}

一个可能的工作示例将不胜感激。

其他想法：我知道在这里可以更好地编写Javascript / HTML测验，这就是我正在努力的方向。 我知道可以使用CSS更好地呈现它（当前正在查看引导程序）。

Answer 1

使用getJson加载文件并处理数据。

在success函数中，您将有一个JSON对象。

至于将数据存储在CSV文件中：可以，但是您必须对其进行解析

编辑：这种方法需要jQuery。

对于纯Javascript：

• 进行AJAX调用以获取文件内容
• JSON.parse()响应。

为了进行该AJAX调用，您还应该熟悉服务器端脚本语言。

在php中（假设getQuiz.php ）：

<?php
     $data = file_get_contents ('quiz');
     echo json_encode($data);
?>

因此，向getQuiz.php发出GET请求，响应将是编码为JSON的文件quiz内容

var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        // Here you have your response
        quiz_data = JSON.parse(xmlhttp.responseText);

        // Other code
    }
}
xmlhttp.open("GET","getQuiz.php",true);
xmlhttp.send();

Answer 2

您可以在头部插入一个脚本标签，例如：

<script type="text/json" src="some.cvs" />

Web浏览器无法识别这些脚本标记，因此请不要下载这些文件。

使用jquery或其他东西找到那些标签的src属性。使用ajax加载这些文件并解析为json数据：

var eles=$("script[type='text/json']").each(function(){
  var cvsurl=$(this).attr("src");
  $.ajax({
    dataType: "json",
    url: ,
    data: data,
    success: function(result){           
        //handling of your json data
     }
  });
})

我只是给出方法。

Answer 3

您可以使用jquery ajax。

$.ajax({
  dataType: "json",
  url: [location of your json file],
  data: data,
  success: 
    function(result){           
        //handling of your json data
    }
});