Может ли кто-нибудь мне помочь? Я уже пробовал много решений здесь. Но моя страница постоянно обновляется, когда я открываю HTML на работающем сервере.
Код формы HTML
:
<form class = "newItem" onsubmit = "return false">
<input type = "text" id = "newInput" placeholder = "Nome">
<input type = "text" id = "newPreg" placeholder = "Pregancies">
<input type = "text" id = "newPlas" placeholder = "Glucose">
<input type = "text" id = "newPres" placeholder = "Blood Pressure">
<input type = "text" id = "newSkin" placeholder = "Skin Thickness">
<input type = "text" id = "newTest" placeholder = "Insulin">
<input type = "text" id = "newMass" placeholder = "BMI">
<input type = "text" id = "newPedi" placeholder = "Diabetes Pedigree Function">
<input type = "text" id = "newAge" placeholder = "Age">
<button type = "button" onclick = "newItem(event)" class = "addBtn">Diagnosticar</button>
</form>
А Script.js
это:
const getList = async () => {
let url = 'http://127.0.0.1:5000/pacientes';
fetch(url, {
method: 'get',
})
.then((response) => response.json())
.then((data) => {
data.pacientes.forEach(item => insertList(item.name,
item.preg,
item.plas,
item.pres,
item.skin,
item.test,
item.mass,
item.pedi,
item.age,
item.outcome
))
})
.catch((error) => {
console.error('Error:', error);
});
}
getList()
const postItem = async (inputPatient, inputPreg, inputPlas,
inputPres, inputSkin, inputTest,
inputMass, inputPedi, inputAge) => {
const formData = new FormData();
formData.append('name', inputPatient);
formData.append('preg', inputPreg);
formData.append('plas', inputPlas);
formData.append('pres', inputPres);
formData.append('skin', inputSkin);
formData.append('test', inputTest);
formData.append('mass', inputMass);
formData.append('pedi', inputPedi);
formData.append('age', inputAge);
let url = 'http://127.0.0.1:5000/paciente';
fetch(url, {
method: 'post',
body: formData
})
.then((response) => response.json())
.catch((error) => {
console.error('Error:', error);
});
}
const insertDeleteButton = (parent) => {
...
}
const removeElement = () => {
...
}
const deleteItem = (item) => {
...
}
const newItem = async (event) => {
event.preventDefault();
let inputPatient = document.getElementById("newInput").value;
let inputPreg = document.getElementById("newPreg").value;
let inputPlas = document.getElementById("newPlas").value;
let inputPres = document.getElementById("newPres").value;
let inputSkin = document.getElementById("newSkin").value;
let inputTest = document.getElementById("newTest").value;
let inputMass = document.getElementById("newMass").value;
let inputPedi = document.getElementById("newPedi").value;
let inputAge = document.getElementById("newAge").value;
const checkUrl = `http://127.0.0.1:5000/pacientes?nome=${inputPatient}`;
fetch(checkUrl, {
method: 'get'
})
.then((response) => response.json())
.then((data) => {
if (data.pacientes && data.pacientes.some(item => item.name === inputPatient)) {
alert("O paciente já está cadastrado.\nCadastre o paciente com um nome diferente ou atualize o existente.");
} else if (inputPatient === '') {
alert("O nome do paciente não pode ser vazio!");
} else if (isNaN(inputPreg) || isNaN(inputPlas) || isNaN(inputPres) || isNaN(inputSkin) || isNaN(inputTest) || isNaN(inputMass) || isNaN(inputPedi) || isNaN(inputAge)) {
alert("Esse(s) campo(s) precisam ser números!");
} else {
insertList(inputPatient, inputPreg, inputPlas, inputPres, inputSkin, inputTest, inputMass, inputPedi, inputAge);
postItem(inputPatient, inputPreg, inputPlas, inputPres, inputSkin, inputTest, inputMass, inputPedi, inputAge);
alert("Item adicionado!");
}
})
.catch((error) => {
console.error('Error:', error);
});
event.preventDefault();
return false;
}
const insertList = (namePatient, preg, plas,pres, skin, test, mass, pedi, age, outcome) => {
var item = [namePatient, preg, plas,pres, skin, test, mass, pedi, age, outcome];
var table = document.getElementById('myTable');
var row = table.insertRow();
for (var i = 0; i < item.length; i++) {
var cell = row.insertCell(i);
cell.textContent = item[i];
}
var deleteCell = row.insertCell(-1);
insertDeleteButton(deleteCell);
document.getElementById("newInput").value = "";
document.getElementById("newPreg").value = "";
document.getElementById("newPlas").value = "";
document.getElementById("newPres").value = "";
document.getElementById("newSkin").value = "";
document.getElementById("newTest").value = "";
document.getElementById("newMass").value = "";
document.getElementById("newPedi").value = "";
document.getElementById("newAge").value = "";
removeElement();
}
API отлично работает на Swagger. Цикл возникает только тогда, когда я открываю index.html
. Иногда цикл останавливается, но после отправки формы он возвращает цикл.
Почему бы вам не просмотреть вкладку «Сеть» в инструментах разработчика и посмотреть, сможете ли вы определить там или в других местах вашего JS-кода, какая строка создает эту остановку?
Почему newItem
объявлено async
? Вы никогда не используете await
.
Звонить event.preventDefault()
дважды тоже нет смысла.
Проблема, с которой вы столкнулись при бесконечном цикле обновления, скорее всего, связана с настройкой отправки формы и обработки событий.
Предотвращение дублирования событий: вы звоните event.preventDefault()
дважды, а также возвращая false
в функции newItem
, что может
вызвать непреднамеренное поведение. Это не обязательно и может привести к
проблемы с обработкой событий.
Обработка отправки формы: onsubmit = "return false"
формы объединены
с кнопкой onclick = "newItem(event)"
теоретически должно
предотвратить отправку формы по умолчанию, но поскольку существует сложная
поток событий, избыточный код может привести к непредсказуемым результатам.
Исправления:
Вместо того, чтобы возвращать false и использовать preventDefault
в нескольких местах,
убедитесь, что вы используете event.preventDefault()
только один раз, когда это необходимо.
Убедитесь, что сама форма не вызывает перезагрузку страницы, удалив
onsubmit = "return false"
и полагаясь исключительно на событие нажатия кнопки, чтобы
обработать форму:
const newItem = async (event) => {
event.preventDefault(); // Prevent form submission once
let inputPatient = document.getElementById("newInput").value;
let inputPreg = document.getElementById("newPreg").value;
let inputPlas = document.getElementById("newPlas").value;
let inputPres = document.getElementById("newPres").value;
let inputSkin = document.getElementById("newSkin").value;
let inputTest = document.getElementById("newTest").value;
let inputMass = document.getElementById("newMass").value;
let inputPedi = document.getElementById("newPedi").value;
let inputAge = document.getElementById("newAge").value;
const checkUrl = `http://127.0.0.1:5000/pacientes?nome=${inputPatient}`;
try {
const response = await fetch(checkUrl, { method: 'get' });
const data = await response.json();
if (data.pacientes && data.pacientes.some(item => item.name === inputPatient)) {
alert("O paciente já está cadastrado.\nCadastre o paciente com um nome diferente ou atualize o existente.");
} else if (inputPatient === '') {
alert("O nome do paciente não pode ser vazio!");
} else if (isNaN(inputPreg) || isNaN(inputPlas) || isNaN(inputPres) || isNaN(inputSkin) || isNaN(inputTest) || isNaN(inputMass) || isNaN(inputPedi) || isNaN(inputAge)) {
alert("Esse(s) campo(s) precisam ser números!");
} else {
insertList(inputPatient, inputPreg, inputPlas, inputPres, inputSkin, inputTest, inputMass, inputPedi, inputAge);
await postItem(inputPatient, inputPreg, inputPlas, inputPres, inputSkin, inputTest, inputMass, inputPedi, inputAge);
alert("Item adicionado!");
}
} catch (error) {
console.error('Error:', error);
}
}
<form class = "newItem">
<input type = "text" id = "newInput" placeholder = "Nome">
<input type = "text" id = "newPreg" placeholder = "Pregnancies">
<input type = "text" id = "newPlas" placeholder = "Glucose">
<input type = "text" id = "newPres" placeholder = "Blood Pressure">
<input type = "text" id = "newSkin" placeholder = "Skin Thickness">
<input type = "text" id = "newTest" placeholder = "Insulin">
<input type = "text" id = "newMass" placeholder = "BMI">
<input type = "text" id = "newPedi" placeholder = "Diabetes Pedigree Function">
<input type = "text" id = "newAge" placeholder = "Age">
<button type = "button" onclick = "newItem(event)" class = "addBtn">Diagnosticar</button>
</form>
Проверьте, есть ли у вас метатег refresh
в вашем html-теге head
.
Я не вижу в JavaScript ничего, что могло бы привести к повторному запуску кода.