После получения ответа от сервера на AJAX запрос страница клиента перезагружается, хотя не должна
У меня есть форма на html-странице, куда вводится массив слов через пробел. По нажатию кнопки подтверждения запрос отправляется на сервер через ajax post запрос.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Л.р.8</title>
<link rel="stylesheet" href="main.css">
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-3.6.0.min.js"
type="text/javascript"></script>
</head>
<body>
<form id="message">
<textarea id="myTextarea"></textarea>
</form>
<div class="button">
<button type='submit' form="message"><p>✔️Отправить</p></button>
<button type='reset' form="message"><p>❌Сбросить</p></button>
</div>
</body>
<script>
$('#message').submit(function(event) {
event.preventDefault();
let textareaValue = $('#myTextarea').val();
let array = textareaValue.split(/\s+/);
console.log("Мы получили массив слов: " + array)
// Дальнейшая обработка данных
// отправляем данные на сервер
$.ajax({
type: 'POST', // метод отправки
url: 'http://localhost:3000/', // адрес, на который отправляем данные
data: JSON.stringify(array), // данные, которые отправляем
contentType: 'application/json',
success: function(response) {
console.log(response); // выводим ответ сервера в консоль
}
});
});
</script>
</html>
На сервере массив принимается и записывается в файл.
const fs = require('fs');
const cors = require('cors');
const express = require('express');
const app = express();
// для парсинга JSON-тела запроса
app.use(express.json());
// разрешаем запросы от других доменов
app.use(cors());
app.use(express.urlencoded({ extended: true }));
app.post('/', (req, res) => {
let array = req.body;
// записываем в файл оригинальный массив
let stringData = array.join('\n');
fs.writeFile('array.txt', stringData, (err) => {
if (err) throw err;
console.log('Данные записаны в файл!');
});
res.send('Данные получены и обработаны на сервере');
});
app.listen(3000, () => {
console.log('Сервер запущен на порту 3000');
});
Проблема заключается в том, что как только приходит ответ сервера на клиентскую сторону, что данные получены и записаны, клиентская страница перезагружается, хотя вроде бы не должна этого делать. Эта проблема появилась сразу как только я добавил сохранение массива в текстовый файл. До этого сервер просто принимал массив и отправлял подтверждение, что всё прошло успешно. Вопрос: как связано сохранение информации в файл на серверной стороне и обновление страницы после этого на клиентской?
Источник: Stack Overflow на русском