Javascript:从 JSON 获取数据

Question

基础知识:我有一个 HTML 表格。我想在不重新加载页面的情况下向表中添加行。我创建了一个 servlet，只要单击“添加”按钮，它就会返回我想要添加到表中的值。

问题:我可以动态地将行添加到表中。问题是从servlet 中获取数据。servlet 非常简单。向其发送三个值，它会返回一个包含新行值的 JSON。我已经测试过了，效果很好。问题是我用来保存值的变量没有超出我在 $.getJSON() 中设置的函数。我对 javascript 没有太多经验，所以我不太确定变量声明的优先级，但有一件事是肯定的，一旦内部函数完成，我的变量就不会保持其值。任何见解将不胜感激。

function addPerson()
{
    var e = document.getElementById("newperson");
    var personid = e.options[e.selectedIndex].value;
    var roleid = e.options[e.selectedIndex].value;
    var r = document.getElementById("newrole");
    var roleid = r.options[r.selectedIndex].value;
    var o = document.getElementById("thisorganizationid");
    var orgid = o.options[o.selectedIndex].value;

    var personName = "";
    var orgName = "";
    var roleName = "";

    $.getJSON("GetPersonRole",{
        personid: personid,
        roleid: roleid,
        orgid: orgid,
      }, function(json) {
          personName = json.Person;
          orgName = json.Organization;
          roleName = json.Role;

          alert('person: ' + personName + '  role: ' + roleName); //They all display properly here
      });

    var table = document.getElementById("PersonTable");
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = orgName;

    var cell2 = row.insertCell(1);
    cell2.innerHTML = personName;

    var cell3 = row.insertCell(2);
    cell3.innerHTML = roleName;

    var cell4 = row.insertCell(3);
    cell4.innerHTML = "adding";

    document.getElementById('addingPerson').innerHTML = addString;
}

Answer 1

getJSON()是一个异步函数。如果您不确定这意味着什么，我建议您阅读有关异步 JS 编程的教程。

你的问题的简单答案是这样的:你试图将变量的值分配给 getJSON() 之前的 DOM 元素。方法已完成。这是一个快速修复(请参阅评论以获取更多说明):

...

$.getJSON("GetPersonRole",{
        personid: personid,
        roleid: roleid,
        orgid: orgid,
      }, function(json) { //Executes when the asynchronous call is complete
          personName = json.Person;
          orgName = json.Organization;
          roleName = json.Role;

          UpdateMyPage(personName, orgName, roleName);
});

//Most likely will execute before the asynchronous call is complete
alert("HERE");

function UpdateMyPage(personName, orgName, roleName) {
    var table = document.getElementById("PersonTable");
    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = orgName;

    var cell2 = row.insertCell(1);
    cell2.innerHTML = personName;

    var cell3 = row.insertCell(2);
    cell3.innerHTML = roleName;

    var cell4 = row.insertCell(3);
    cell4.innerHTML = "adding";

    document.getElementById('addingPerson').innerHTML = addString;   
}