在 HTA 应用程序中使用 JQUERY 读取 JSON 文件

Question

所以我正在处理这个 HTA 应用程序，它将用于几乎没有互联网的偏远地区。它应该是非常基本的，因为我只希望它 load/read 一个 json 文件和 edit/append JSON 文件中的一些字段。如果我通过将扩展名更改为 .html 在 Web 浏览器中加载它，它可以工作并读取 json 没问题，当我将它重命名回 .hta 并执行它时，它只是空白。我不明白为什么。

testJSON.hta

<html>

<head>
  <title>TEST - JSON Editor</title>
  <HTA:APPLICATION ID="oHTA" APPLICATIONNAME="TESTJSON" BORDER="thin" BORDERSTYLE="normal" CAPTION="yes"
    ICON="TESTJSON/images/TEST_twit_logo_ijM_icon.ico" MAXIMIZEBUTTON="yes" MINIMIZEBUTTON="yes" SYSMENU="yes"
    SCROLL="no" NAVIGABLE="yes" SINGLEINSTANCE="no" SHOWINTASKBAR="yes" VERSION="1.0" WINDOWSTATE="normal">
    <script>
      window.location = 'testJSON.html';
    </script>
</head>

</html>

testJSON.html

<!DOCTYPE html>
<html>
<head>
    <title>TEST - JSON Editor</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge" />
    <link rel="stylesheet" href="TESTJSON/css/bootstrap.min.css">
    <link rel="stylesheet" href="TESTJSON/css/style.css">
    <script src="TESTJSON/js/jquery.min.js"></script>
    <script src="TESTJSON/js/bootstrap.min.js"></script>

    <!--Begin Vbscript-->
    <script language="VBScript">
    </script>

</head>

<body onload="readJSON()" scroll="no">
    <div class="logo">
        <img class="logo-image" src="TESTJSON/images/TEST-logo.png">
    </div>

    <div class="container">
        <div class="row">
            Select a JSON file: <input type="file" accept=".json" name="jsonFile"><br><br>
        </div>
    </div>
    <div class="status_window">
        Status / Information:
        <div class="status_window_text" id="output">

        </div>
    </div>
</body>
<!--Begin Jscript-->
<script type="text/javascript">
function readJSON() {
    $(document).ready(function () {
        $.getJSON("example_2.json", function (data) {
            var content = '<h3>' + data.quiz.sport.q1.question + '</h3>';
            $(content).appendTo("#output");

        });
    });
}

function myFunction() {
  alert("Page is loaded");
}

</script>
</html>

example_2.json

{
    "quiz": {
        "sport": {
            "q1": {
                "question": "Which one is correct team name in NBA?",
                "options": [
                    "New York Bulls",
                    "Los Angeles Kings",
                    "Golden State Warriros",
                    "Huston Rocket"
                ],
                "answer": "Huston Rocket"
            }
        },
        "maths": {
            "q1": {
                "question": "5 + 7 = ?",
                "options": [
                    "10",
                    "11",
                    "12",
                    "13"
                ],
                "answer": "12"
            },
            "q2": {
                "question": "12 - 8 = ?",
                "options": [
                    "1",
                    "2",
                    "3",
                    "4"
                ],
                "answer": "4"
            }
        }
    }
}

Answer 1

使用 HTML5 FILE API 我能够让脚本与下面的代码一起工作

这是来自 JSON 的查询，我能够 return。

JsonObj.quiz.sport.q1.question

代码：

    function readJSON() {
        //Testing to see if the text would display in the DIV
        document.getElementById("output").innerHTML = "Importing JSON....";
        //script start
        JsonObj = null

        function handleFileSelect(evt) {
            var files = evt.target.files; // FileList object
            f = files[0];
            var reader = new FileReader();

            // Closure to capture the file information.
            reader.onload = (function (theFile) {
                return function (e) {
                    // Render thumbnail.
                    JsonObj = JSON.parse(e.target.result);
                    console.log(JsonObj);
                    document.getElementById('output').innerHTML += '<ul>' + JsonObj.quiz.sport.q1.question + '</ul>';
                };
            })(f);

            // Read in the image file as a data URL.
            reader.readAsText(f);
        }

        document.getElementById('files').addEventListener('change', handleFileSelect, false);

    }

在 HTA 应用程序中使用 JQUERY 读取 JSON 文件

Reading a JSON File using JQUERY within an HTA Application

javascript

jquery

json

hta