获取请求使不需要的页面重新加载

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()
}

阻止默认事件操作，问题将得到解决。