使用XMLHttpRequest在JSON存储JSON文件中编辑用户

Question

我有一个问题，希望这里有人能帮我解决。我正在尝试编辑JSON文件中的一个用户。因此，我在HTML中创建了一个ID为"的按钮；editBtn"；。我的用户存储在文件存储器中。JSON。登录的用户被保存在LocalStorage中作为"用户"；currentUser"；。用户名是唯一的ID，因此在HTML中设置为只读。

我已经编写了以下代码，但不幸的是，它不起作用。当我在整个代码中console.log时，它似乎在xhr.addEventListener之后停止了反应。此外，当开始拼接数组并随后发出PUT请求时，我不确定我的逻辑是否正确。

我是编码新手，所以可能会有很多缺陷。

API-CRUD:公司

app.get('/editProfile', (req, res) => {

var allUsers = JSON.parse(fs.readFileSync("storage.JSON"))
res.json(allUsers)
})

app.put('/editProfile', (req, res)=> {
let reqData = req.body;
console.log('Post request virker')
console.log(reqData) 
var storage = JSON.parse(fs.readFileSync("storage.JSON"))
storage.push(reqData);
fs.writeFileSync("storage.JSON", JSON.stringify(storage, null, 2));
//console.log(reqData);
res.send(JSON.stringify({message: 'the user is updates as', storage}));
})

editProfile.js

var currentUser = JSON.parse(localStorage.getItem("currentUser"));
document.getElementById("username").value = currentUser.username;
document.getElementById("editPhone").value = currentUser.phone;
document.getElementById("newCity").value = currentUser.city;
document.getElementById("newZip").value = currentUser.zip;
document.getElementById("newAddress").value = currentUser.address;
document.getElementById("newEmail").value = currentUser.email;
document.getElementById("newPassword").value = currentUser.password;

editUser = document.getElementById("editBtn")
editUser.addEventListener('click', ()=> {

const xhr = new XMLHttpRequest();
xhr.responseType = "json"


const username = document.getElementById('username');
const phone = document.getElementById('editPhone');
const city = document.getElementById('newCity');
const zip = document.getElementById('newZip');
const address = document.getElementById('newAddress');
const email = document.getElementById('newEmail');
const password = document.getElementById('newPassword');

var data = {
username : username.value, 
phone : phone.value,
city : city.value,
zip : zip.value,
address : address.value,
email : email.value,
password : password.value,
}
xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
var allUsers = this.response;


for (i = 0; i < allUsers.length; i++) {
if (allUsers[i].username === username){
allUsers.splice(i,1); 
console.log(allUsers)


} }};

xhr.open("PUT", "http://localhost:2500/editProfile", true);

xhr.setRequestHeader("Content-Type", "application/json");


xhr.send(JSON.stringify(data));

}) 
})

谢谢你看我的问题

Answer 1

您应该小心嵌套代码。如果您编写函数并从事件处理程序中调用它们，您的代码将更容易阅读和理解。

您面临的问题是您在代码中遗漏了一个)。这是一个按照我的建议编写的版本：

editUser.addEventListener('click', retrieveAndSendUpdate);
function retriveAndSendUpdate() {
const username = document.getElementById('username');
const phone = document.getElementById('editPhone');
const city = document.getElementById('newCity');
const zip = document.getElementById('newZip');
const address = document.getElementById('newAddress');
const email = document.getElementById('newEmail');
const password = document.getElementById('newPassword');
var data = {
username: username.value,
phone: phone.value,
city: city.value,
zip: zip.value,
address: address.value,
email: email.value,
password: password.value,
}
sendUpdate(data);
}
function sendUpdate(data) {
const xhr = new XMLHttpRequest();
xhr.responseType = "json"
xhr.addEventListener("readystatechange", processResponse);
xhr.open("PUT", "http://localhost:2500/editProfile", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify(data));
}
function processResponse(e) {
if (e.readyState === 4) {
var allUsers = e.response;
for (i = 0; i < allUsers.length; i++) {
if (allUsers[i].username === username) {
allUsers.splice(i, 1);
console.log(allUsers)
}
}
}
}

在处理用户之前，您还应该考虑测试是否真的从服务器返回了用户。