每次调用Javascript函数时获取新的JSON数据

我有一个JavaRESTAPI，带有一些JSOn数据，我正在使用javascript

我有两种方法，一种是显示数据，另一种是何时添加新数据：

因此，我在第一个bata中添加了一个EventListener来提交数据：

btn.addEventListener("click", function() {
var request = new XMLHttpRequest();
request.open('GET', 'http://localhost:8084/RestandJson/api/Person');
request.onload = function(){
  var data = JSON.parse(request.responseText);
  addPerson(data);


};
request.send();

});

使用addPerson方法，如下所示：

const addPerson = (data) => {
var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
var age = document.getElementById("age").value;
var id = data[data.length-1].id +1;
const person = {fName, lName, age, id};

data.push(person);
console.log(person);
for(i = 0; i< data.length; i++){
    console.log(data[i]);
}

const addPerson=（数据）=>{
var fName=document.getElementById（“fName”）.value；
var lName=document.getElementById（“lName”）.value；
var age=document.getElementById（“age”）.value；
var id=data[data.length-1].id+1；
const person={fName，lName，age，id}；
数据推送（人）；
控制台日志（个人）；
对于（i=0；i

}

问题是，每个GET请求都会生成新的数据，因此我只想获取一次数据，并将其保存在数组中，然后从此处添加新的人员

在将JSON数据转换为对象后，我有一个方法来显示JSON数据：

我在另一个按钮中添加了一个事件侦听器，就像前面调用此方法时一样：

render HTML = (data) => {
let htmlString = "";


for(i = 0; i < data.length; i++){
    htmlString += "<p> " + data[i].fName +" " + " " + data[i].lName + " " +  data[i].age  + " " + data[i].id  + "</p>"
}
root.insertAdjacentHTML('beforeend', htmlString);
}

render HTML=（数据）=>{
让htmlString=“”；
对于（i=0；i”
}
root.insertAdjacentHTML（'beforeend'，htmlString）；
}

//绑定单击按钮上的事件以添加人员信息
addPersonbtn.addEventListener（'单击'，函数（））{
addPerson（）；
});
//从api获取所有人员数据（加载应用程序时调用此函数）
函数getPersonList（）{
var request=new XMLHttpRequest（）；
request.open（'GET'，'http://localhost:8084/RestandJson/api/Person');
request.onload=函数（）{
var data=JSON.parse（request.responseText）；
renderHTML（数据）；
};
request.send（）；
}
函数postPersonData（personInfo）{
//您的api可以添加单个Person信息
//成功调用getPersonList（）时，它将更新列表
}
const addPerson=（）=>{
var fName=document.getElementById（“fName”）.value；
var lName=document.getElementById（“lName”）.value；
var age=document.getElementById（“age”）.value；
//var id=data[data.length-1].id+1；//在数据库端处理，主键，自动生成
const person={fName，lName，age}；
事后数据（人）；
}
renderHTML=（数据）=>{
让htmlString=“”；
对于（i=0；i”
}
root.insertAdjacentHTML（'beforeend'，htmlString）；
}

---

我已经为您编写了伪代码，希望它能对您有所帮助

这非常好，谢谢您，但是，如果我测试了它，将得到更多的人，添加的人，永远不会显示。我每次都会得到新的值，有没有可能从一个get请求中得到一个数组，而不是每次新的数据？有没有可能从一个get请求中得到一个数组，而不是每次新的数据？是的，您可以将结果存储在一个全局变量*中并使用它。

//bind click event on button to add person info
addPersonbtn.addEventListener('click', function() {
    addPerson();
});


// fetch all person data from api (call this function when app load)
function getPersonList() {
    var request = new XMLHttpRequest();
    request.open('GET', 'http://localhost:8084/RestandJson/api/Person');
    request.onload = function(){
      var data = JSON.parse(request.responseText);
        renderHTML(data);
    };
    request.send();
}

function postPersonData(personInfo) {
    // your api to add single persion info

    // on success call getPersonList(), it will update the list 
}

const addPerson = () => {
var fName = document.getElementById("fname").value;
var lName = document.getElementById("lname").value;
var age = document.getElementById("age").value;
//var id = data[data.length-1].id +1;    // handle it on db side, Primary key, auto generation
const person = {fName, lName, age};
postPersonData(person);

}

renderHTML = (data) => {
let htmlString = "";
for(i = 0; i < data.length; i++){
    htmlString += "<p> " + data[i].fName +" " + " " + data[i].lName + " " +  data[i].age  + " " + data[i].id  + "</p>"
}
root.insertAdjacentHTML('beforeend', htmlString);
}