HTML-страница постоянно обновляется

Может ли кто-нибудь мне помочь? Я уже пробовал много решений здесь. Но моя страница постоянно обновляется, когда я открываю 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. Иногда цикл останавливается, но после отправки формы он возвращает цикл.

Я не вижу в JavaScript ничего, что могло бы привести к повторному запуску кода.

Barmar 03.09.2024 22:03

Почему бы вам не просмотреть вкладку «Сеть» в инструментах разработчика и посмотреть, сможете ли вы определить там или в других местах вашего JS-кода, какая строка создает эту остановку?

Roko C. Buljan 03.09.2024 22:04

Почему newItem объявлено async? Вы никогда не используете await.

Barmar 03.09.2024 22:05

Звонить event.preventDefault() дважды тоже нет смысла.

Barmar 03.09.2024 22:05
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
55
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема, с которой вы столкнулись при бесконечном цикле обновления, скорее всего, связана с настройкой отправки формы и обработки событий.

  • Предотвращение дублирования событий: вы звоните 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.

tushortz 03.09.2024 22:17

Другие вопросы по теме

Похожие вопросы

Невозможно перемещаться по HTML-странице через веб-приложение (скрипт Google Apps)
Регулярное выражение для проверки того, содержит ли ввод две заданные строки, а часть между ними не содержит ни одного элемента из набора указанных строк
В файле location.href намеренно отсутствуют имя пользователя и пароль при включении в URL-адрес?
Расширение не загружается в коде Visual Studio — сообщения об отладке не отображаются
Как добавить учащегося (@gmail.com) в класс Classroom, созданный внутри моей организации с помощью Apps Script?
При использовании parseFloat невозможно вычислить сумму более 1 миллиона
Используйте предопределенный массив строковых значений для querySelectorAll, чтобы выполнить определенное действие
Как правильно использовать делегирование событий вместо добавления второго одновременного прослушивателя событий для того же типа событий?
Html и php или js выбираются с помощью запроса с относительным полем
Копирование элемента рядом с элементом соответственно не работает