如何將外部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
    }
});