Javascript: получение данных от JSON

Question

Основы: У меня есть таблица HTML. Я хочу добавить строки в таблицу без перезагрузки страницы. Я создал сервлет, который возвращает значения, которые я хочу добавить в таблицу, когда нажимается кнопка «Добавить».

Проблема: я могу динамически добавлять строки в таблицу просто отлично. Проблема заключается в получении данных из сервлета. Сервлет очень прост. Отправьте три значения и верните 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

Ваши переменные определяются в пределах объема функции. Если вы определили их глобально, как это так, вы должны быть в состоянии получить доступ к ним в другом месте:

var personName = ""; 
var orgName = ""; 
var roleName = ""; 
function addPerson() 
    { 
     ... 

etc... 

Answer 2

Ваша функция обратного вызова:

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

Answer 3

getJSON() асинхронная функция. Если вы не знаете, что это значит, я предлагаю прочитать учебное пособие по асинхронному JS-программированию.

Простой ответ на ваш вопрос таков: вы пытаетесь присвоить значения ваших переменных вашим элементам DOM до завершения метода getJSON(). Вот быстрое решение (см комментариев для дальнейшего объяснения):

... 

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

Answer 4

Похоже, что строка добавляется до значения возвращается сервер. Я бы и функция addRow() и вызвать его на успех:

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