Javascript : JSON에서 데이터 가져 오기

Question

기본 사항 : HTML 표가 있습니다. 페이지를 다시로드하지 않고 표에 행을 추가하려고합니다. "추가"버튼을 클릭 할 때마다 테이블에 추가 할 값을 반환하는 서블릿을 만들었습니다.

문제 : 동적으로 표를 동적으로 추가 할 수 있습니다. 문제는 서블릿에서 데이터를 가져 오는 것입니다. 서블릿은 매우 간단합니다. 세 개의 값을 보내면 새 행의 값이있는 JSON이 반환됩니다. 나는 테스트를했으며 잘 작동합니다. 문제는 내가 값을 $ .getJSON()에 설정 한 함수를 넘기지 않는데 사용하는 변수이다. 자바 스크립트에 대한 많은 경험이 없으므로 변수 선언의 우선 순위를 정확히 알 수는 없지만 한 가지 확실한 점은 내 변수가 내부 함수가 완료되면 변수가 값을 유지하지 않는다는 것입니다. 모든 통찰력은 인정 될 것이다.

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

콜백 기능 : AJAX 호출이 반환 될 때

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

을 실행합니다. 이미 테이블에 추가 될 때까지 변수가 새 값으로 설정되지 않는다는 것을 의미합니다.

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 프로그래밍에 대한 자습서를 읽는 것이 좋습니다.

질문에 대한 간단한 대답은 다음과 같습니다. 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; 
} 

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