全局JSON变量

Question

如果您通过单击下面的链接查看我到目前为止所拥有信息的来源，您将看到我遇到的问题。

• 我从Ricky.json中获取JSON数据，其中包含游戏数据。
• 然后，我尝试用JSON数据的一部分在文本字段中设置Pikachu的名称，但是它说它是undefined。

我在Chrome上的控制台说，这个对象"pikachu“是存在的，因为当我在控制台中警告它时，它会返回”object object“。我还可以使用JSON.stringify()通过控制台对其进行字符串化。

为什么函数main()本身不是全局的，但在其他任何地方它都是？

养一只皮卡丘

function ChangeName(){
    var n=prompt("What would you like to rename your Pikachu?",""+pikachu.pikaname+"");
    pikachu.pikaname=n;
}

function main(){
    try{
        ajaxObj=new XMLHttpRequest();
        pikaname=document.getElementById("pikaname");
        age=document.getElementById("age");pikachu="";
        ajaxObj.onreadystatechange=function(){
            if(ajaxObj.readyState>=4&&ajaxObj.status==200){
                pikachu=JSON.parse(ajaxObj.responseText);
            }
        }
        ajaxObj.open("GET","players/Ricky.json",true);
        ajaxObj.send();
        pikaname.value=pikachu.pikaname;
    }
    catch(e){
        alert(e);
    }
}

Answer 1

AJAX调用异步运行。在执行行pikaname.value = pikachu.pikaname;时，JSON实际上还不可用。相反，您需要在onreadystatechange事件中设置它：

    ajaxObj.onreadystatechange=function(){
        if(ajaxObj.readyState>=4&&ajaxObj.status==200){
            pikachu=JSON.parse(ajaxObj.responseText);
            // Set the value in the onreadystatechange...
            pikaname.value = pikachu.pikaname;
        }
    }

现在，我还要指出，您可能不应该依赖于pikaname作为一个没有var的全局定义。相反，使用var定义任何函数，或者检索它，并在使用它的函数中使用var来定义它。

// Define at global scope
var pikachu;
function ChangeName(){
    var n=prompt("What would you like to rename your Pikachu?",""+pikachu.pikaname+"");
    pikachu.pikaname=n;
}

function main(){
    try{
        // Define with var in this function
        var ajaxObj=new XMLHttpRequest();
        var pikaname=document.getElementById("pikaname");
        var age=document.getElementById("age");
        pikachu="";

        ajaxObj.onreadystatechange=function(){
            if(ajaxObj.readyState>=4&&ajaxObj.status==200){
                pikachu=JSON.parse(ajaxObj.responseText);
            }
        }
        ajaxObj.open("GET","players/Ricky.json",true);
        ajaxObj.send();
        pikaname.value=pikachu.pikaname;
    }
    catch(e){
        alert(e);
    }
}

Answer 2

你的问题似乎就在这里：

   age=document.getElementById("age");pikachu="";
    ajaxObj.onreadystatechange=function(){
        if(ajaxObj.readyState>=4&&ajaxObj.status==200){
            pikachu=JSON.parse(ajaxObj.responseText);
        }
    }
    ajaxObj.open("GET","players/Ricky.json",true);
    ajaxObj.send();
    pikaname.value=pikachu.pikaname;

第一行将空字符串分配给pikachu。(顺便说一句，我不会把多项任务放在这样的线上。)

几行之后，您将通过异步调用再次为pikachu分配一个值。但这是异步的。因此，当您到达期望pikachu成为具有pikaname属性的对象的最后一行时，并不能保证分配会发生。

在这种情况下，pikachu仍然是一个空字符串。