Question

我有一个只有一个表的html文件，在一行中包含5个单元格，显示5个NFL团队。 td的 ids 是“Team0”到“Team4”（从左到右）。
我的目的是将双击团队移动到右边的最后一个位置（到名为“Team4”的单元格）。
在每个 td 中，我都会调用 Rearrange_Teams（iPosition）。
iPosition 是td id中的数字（ Team3 调用 Rearrange_Teams（3）。

以下代码运行正常，但我想更改函数 Load_Teams（），以便从我桌面上的文件（保存我的html文件）中加载团队：

<script>
    Array.prototype.Rearrange = function(from,to){
        this.splice(to,0,this.splice(from,1)[0]);
        return this;
    };

    var aTeams = [];
    Load_Teams();
    List_Teams();

    function Load_Teams() {
        aTeams [0] = "PANTHERS";
        aTeams [1] = "CARDINALS";
        aTeams [2] = "BENGALS";
        aTeams [3] = "BRONCOS";
        aTeams [4] = "PATRIOTS";
    }

    function List_Teams() {
        document.getElementById("Team0").innerHTML = aTeams [0];
        document.getElementById("Team1").innerHTML = aTeams [1];
        document.getElementById("Team2").innerHTML = aTeams [2];
        document.getElementById("Team3").innerHTML = aTeams [3];
        document.getElementById("Team4").innerHTML = aTeams [4];
    }

    function Rearrange_Teams(iPosition_Clicked) {
        aTeams.Rearrange(iPosition_Clicked,4);
        List_Teams();
    }
</script>

html页面和数据文件（JSON？txt？）都应保存在我的计算机（桌面或用户目录，无论......）中。我只是找不到答案来帮助我...好吧，至少我无法理解我在我看到的代码中所做的改变......

我的想法是保存列表中的更改，因此我必须加载以前的配置并保存实际的配置...
根据我之前的建议，无法设置本地网络服务器，因为我的目的是在我的工作中使用此页面而用户没有管理员权限（包括我自己）。
我们目前使用带有VBA的Excel工作表来完成工作，但我想将其更改为浏览器。

回复后编辑：
我试过了：

function Load_Teams() {
    var actual_JSON;
    loadJSON("My_File_with_Data.json", function(response) {
        actual_JSON = JSON.parse(response);
    });
    alert(actual_JSON);
}

function loadJSON(filename, callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', filename, true);
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}

但什么都没发生...... 警告（actual_JSON）不显示任何内容（只是弹出一个空白，显示“ok”）。我不知道如何将 actual_JSON 的内容（它真的有任何???）传递给 aTeams 。
文件 My_File_with_Data.json 如下所示：

{“jTeams”：[“PANTHERS”，“CARDINALS”，“BENGALS”，“BRONCOS”，“PATRIOTS”]}

新方法：

    var aTeam = [];
    readTextFile();
    List_Teams();

    function readTextFile(){
        var rawFile = new XMLHttpRequest();
        rawFile.open("GET", "Teams.txt", true);
        rawFile.onreadystatechange = function (){
            if(rawFile.readyState === 4){
                var  allText = rawFile.responseText;
                aTeam = allText.split("/");
                alert(aTeam[4]);
            }
        }
        rawFile.send();
    }

    function List_Teams() {
        document.getElementById("Team0").innerHTML = aTeam[0];
        document.getElementById("Team1").innerHTML = aTeam[1];
        document.getElementById("Team2").innerHTML = aTeam[2];
        document.getElementById("Team3").innerHTML = aTeam[3];
        document.getElementById("Team4").innerHTML = aTeam[4];
    }

Teams.txt 文件如下所示： PANTHERS /红雀/山猫/野马/ PATRIOTS

readTextFile（）运行时，警报（aTeam [4]）会显示 PATRIOTS 。但 List_Teams（）用 undefined 填充我的表格。
怎么会？？？似乎是一个范围问题，但 aTeam 是一个全球性的！...

Answer 1

来自this blog post的稍微修改过的代码版本，这是一个可用于加载JSON的函数：

function loadJSON(filename, callback) {   
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open('GET', filename, true);
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200") {
      // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
      callback(xobj.responseText);
    }
  };
  xobj.send(null);  
}

要使用此功能，您需要回调：

var actual_JSON;
loadJSON("localhost:8000/my-file", function(response) {
  // Parse JSON string into object
  actual_JSON = JSON.parse(response);
});
alert(actual_JSON);

将/my-file替换为您文件的路径。

您还需要该位置的服务器，您可以快速设置like this

从本地计算机上的文件中检索数据

1 个答案: