每次调用Javascript函数时都会获取新的JSON数据
每次调用Javascript函数时都会获取新的JSON数据
提问于 2018-09-24 01:50:45
我有一个Java REST API，其中包含一些用javascript编写的JSOn数据。
我有两种方法，一种是显示数据，以及何时添加新数据：
所以我在我的第一个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);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-24 02:05:16
//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);
}我已经为你做了伪代码，希望它能对你有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52468764
复制相关文章
相似问题