Javascript:从JSON中获取数据

Javascript: getting data from a JSON

本文关键字：获取 数据 JSON Javascript      更新时间：2023-09-26

基础知识：我有一个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;
}

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;   
}

您的回调函数：

    $.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
 });

返回AJAX调用时执行。这意味着您的变量在添加到表中之前不会被设置为新值。

你的代码应该是这样的：

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;
     });
}

看起来该行是在服务器返回值之前添加的。我会创建并添加Row（）函数，并在成功时调用它：

function addRow(json){
    // include all code after the getJSON method above...
    var cell1 = row.insertCell(0);
    cell1.innerHTML = json.Organization;
    var cell2 = row.insertCell(1);
    cell2.innerHTML = json.Person;
    // etc...
}

然后你需要做：

$.getJSON("GetPersonRole",{
    personid: personid,
    roleid: roleid,
    orgid: orgid,
  }, addRow);

您的变量是在函数的范围内定义的。如果你像这样在全球范围内定义它们，你应该能够在其他地方访问它们：

var personName = "";
var orgName = "";
var roleName = "";
function addPerson()
    {
        ...
etc...
相关文章：