【问题标题】:How I can call a post function with a link如何使用链接调用 post 函数
【发布时间】:2020-05-29 07:21:32
【问题描述】:

我有一个导航栏,我还想有一个标签,我可以在其中调用我的 post 函数。问题是我不知道如何用链接调用它。如果您查看我的导航栏代码,您会看到我正在处理链接。

这是我的帖子功能

app.post('/logout', (req, res) => {
    if (req.session) {
        try{
            console.log(`${req.session.userdata.name} logged out at ${getTime()} at the devide ${req.ip.slice(7)} ${req.ips}`)
        } catch(error){
            console.log(`"Err" logged out at ${getTime()} at the devide ${req.ip.slice(7)} ${req.ips}`);
        }
        req.session.destroy(function(err) {
            if(err) {
                return next(err);
            } else {
                return res.redirect('/');
            };
        });
    };
});

这是我的导航栏代码

<div class="navbar">
    <a class="active" href="/user/:id/home">Home</a>
    <a href="/">Login</a>
    <a href="/info">Info</a>
</div>

我也试过了

<form action="/logout" method="post">
  <a href="#" id = "logout" title="save logout"><i class="fa fa-fw fa-power-off"> </i>Logout</a>
</form>

【问题讨论】:

  • 您不能仅使用 HTML 中的链接发出 POST 请求。您的两个基本选项是 AJAX/fetch(用于后台请求)或提交表单。
  • (顺便说一句,我很确定我昨天已经回答了几乎完全相同的问题?)
  • 是的,但由于没有更多评论,我重新上传了它。我也尝试了表单提交,您可以在最后一个代码中看到它
  • 请不要这样做 - 如果每个人都删除并重新创建他们的问题,只是因为他们在等待时有点不耐烦,这个网站很快就会变得混乱回复。
  • 表单不是这样工作的,它们不是通过单击链接提交的,您需要一个提交按钮。如果你想使用链接,那么你需要添加一个点击处理程序,然后调用表单的submit 方法。

标签: javascript html express


【解决方案1】:

你应该监听链接的click事件,以及使用javascript的表单submit

这里我用的是 JQuery,

$('#logout').click(function(e){

  e.preventDefault();
  $('#logout_form').submit();

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="/logout" method="post" id='logout_form'>
  <a href="#" id="logout" title="save logout">
     <i class="fa fa-fw fa-power-off"> </i>Logout
  </a>
</form>

【讨论】:

  • 您好,感谢您的帮助。当我尝试运行它并尝试单击它时,唯一发生的事情是在 url 的末尾只有一个 # 应用。
  • @Taris 则事件处理程序未正确绑定,因此执行了 正常 链接操作。 (您甚至在您的项目中使用 jQuery 吗?如果没有,您需要将其重写为您的客户端 JS 库进行事件处理,或者将其重写为 vanilla JS,如果您不使用任何。)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-01-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-08-19
相关资源
最近更新 更多