Javascript:从JSON获取数据
基本知识:我有一个HTML表格。我想在不重新加载页面的情况下向表中添加行。我创建了一个servlet,每当单击“添加”按钮时,它都会返回要添加到表中的值 问题是:我可以动态地将行添加到表中。问题是从中的servlet获取数据。servlet非常简单。发送三个值,它返回一个JSON,其中包含新行的值。我已经测试过了,效果很好。问题是我用来保存值的变量没有传递到我在$.getJSON()中设置的函数之外。我对javascript没有太多的经验,所以我不能确切地确定变量声明的优先级,但有一点是肯定的,我的变量在内部函数完成后不会保持其值。如有任何见解,将不胜感激Javascript:从JSON获取数据,javascript,jquery,ajax,Javascript,Jquery,Ajax,基本知识:我有一个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;
}
变量是在函数的范围内定义的。如果您像这样在全局范围内定义它们,您应该能够在其他地方访问它们:
var personName = "";
var orgName = "";
var roleName = "";
function addPerson()
{
...
etc...
您的回调函数:
$.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;
});
}
是一个异步函数。如果您不确定这意味着什么,我建议您阅读一篇关于异步JS编程的教程
对您的问题的简单回答是:您试图在方法完成之前将变量的值分配给DOM元素。这里有一个快速修复方法(请参阅注释以获得进一步解释):
看起来该行是在服务器返回值之前添加的。我将生成和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);
他也在函数中使用它们,格式有点混乱,这使得addPerson函数看起来已经结束了。这不会解决它。如果您查看,您将看到表在AJAX回调执行之前被更新。谢谢。你完全正确。我现在明白我做错了什么。在getJSON中包含剩余代码会导致整个块以实物形式执行。非常感谢!
$.getJSON("GetPersonRole",{
personid: personid,
roleid: roleid,
orgid: orgid,
}, addRow);