如何解决调用Javascript函数时获取新的JSON数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (107)

有一个Java REST API,带有一些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]);
}

}

问题是,为每个GET请求生成了新数据,因此我只想获取一次数据,并将其保存在数组中,然后从那里添加新人。

我有一个方法来显示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);
}
提问于
用户回答回答于
//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);
}

扫码关注云+社区

领取腾讯云代金券