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

正如SpeedOfRound所说，他是正确的。我自己没有看到这个问题。谢谢您的帮助！

解决方案： 删除<form>文件中的多余detailjs.ejs标签。即使我正在使用获取请求，这些标签也导致页面刷新。

Answer 2

问题是，单击按钮时，表单正在提交并导致页面重新加载。

您可以在操作here中看到问题。

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

防止默认事件动作，问题将得到解决。

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

2 个答案: