Запрос на выборку приводит к нежелательной перезагрузке страницы

Question

У меня проблема с запросом на выборку со стороны моего клиента на сервер. Каким-то образом запрос на выборку вызывает перезагрузку страницы, чего я хочу избежать. Я искал несколько мест, чтобы выяснить это, но я должен обратиться к вам, ребята, за помощью.

Все транзакции данных между базой данных работают должным образом. Видимо ошибок в функционале нет. За исключением того факта, что я не хочу, чтобы страница перезагружалась при запуске запроса на выборку.

Обратите внимание, что я использую EJS в качестве движка шаблонов, а Bootstrap 4 - в качестве интерфейсной библиотеки.

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

Внешний HTML:

// detailjs.ejs

<div class="row">
    <form>
        <button class="btn btn-outline-primary" onclick="UpdateArchiveStatus(this)" id="btn-move-to-inbox"><i class="fas fa-inbox"></i> Flytt til innboks</button>
        <button class="btn btn-outline-primary" onclick="UpdateArchiveStatus(this)" id="btn-move-to-archive"><i class="fas fa-archive"></i> Arkiver</button>
    </form>
</div>

<div class="row">
    <input type="hidden" name="resolved-status" id="resolved-status" value="<%= message.status.isResolved %>">
    <input type="hidden" name="archive-status" id="archive-status" value="<%= message.status.isArchived %>">
</div>

<!-- Script include --!>
<script src="/assets/js/messages/message-admin.js">

Интерфейс JavaScript

//message-admin.js

const UpdateArchiveStatus = btn => {
var messageId = $('#message-id').val();
var currentArchiveStatus = $('#archive-status').val();
var newArchiveStatus = null;

if (currentArchiveStatus == 'true') {
    newArchiveStatus = false;
 } else {
   newArchiveStatus = true;
 }
 StoreArchiveStatus(messageId, newArchiveStatus);
};

function StoreArchiveStatus (messageId, archiveStatus) {
    fetch(`/backoffice/api/messages/archive/${messageId}/${archiveStatus}`, 
    {
        method: 'GET',
    })
    .then(result => {
         return result.json();
    })
    .then(data => {
        $('#archive-status').val(data.status);
        CheckArchiveStatus();
        console.log(data.message);
    })
    .catch(err => {
        console.log(err);
     });
    };

function ToggleArchivedInterface () {
    var inboxButton   = $('#btn-move-to-inbox');
    var archiveButton = $('#btn-move-to-archive');

    inboxButton.removeClass('invisible');
    archiveButton.addClass('invisible');
};

function ToggleInboxInterface () {
    var inboxButton   = $('#btn-move-to-inbox');
    var archiveButton = $('#btn-move-to-archive');

    archiveButton.removeClass('invisible');
    inboxButton.addClass('invisible');
};

async function CheckArchiveStatus () {
    var archiveStatus = $('#archive-status').val();
    if (archiveStatus == 'true') {
        ToggleArchivedInterface();
    } else {
        ToggleInboxInterface();
    }
};

Внутренний маршрут:

//routes/backoffice.js

router.get('/api/messages/archive/:messageId/:archiveStatus', authenticate, backofficeController.apiUpdateMessageArchiveStatus);

Функция внутреннего контроллера:

//controllers/backoffice.js

exports.apiUpdateMessageResolvedStatus = (req, res, next) => {
    var messageId      = req.params.messageId;
    var resolvedStatus = req.params.resolvedStatus;

    VisitorMessage.findOneAndUpdate(
        { '_id' : messageId },
        { $set: {
            'status.isResolved': resolvedStatus
        }
    }).then((message) => {
        res.status(200).json({message: `Message status was changed`, status: resolvedStatus})
   }).catch((err) => {
       console.log('The following error occured during update:\n' + err);
       res.status(500).json({message: 'An error occured during update.'});
   })
};

Answer 1

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

Вы можете увидеть проблему в действии здесь .

function btnclick(e) {
  // comment and uncomment e.preventDefault to see the differences
  e.preventDefault()
}

Запрет действия по умолчанию для события, и проблема будет решена.

Answer 2

Как прокомментировал SpeedOfRound, он совершенно прав. Я не видел эту проблему сам. Спасибо за помощь!

Решение: Удалите лишние теги <form> в файле detailjs.ejs. Эти теги заставили страницу обновиться, хотя я использовал запрос на выборку.