在单击事件中 ajax 调用后重定向位置

Question

下面的代码应该

删除a标签为select
重定向到 /projects 网页。

似乎重定向到 /projects 是在删除函数有机会到达运行之前发生的。

这里有我遗漏的最佳实践吗？或者有更好的方法吗？

$(document).ready(function() {
  $('#delete').click(function() {
    var settings = {
      url: `http://localhost:3000/projects/<%= project.id %>`,
      method: 'DELETE',
      timeout: 0,
    };

    $.ajax(settings).done(function(response) {
      console.log(response);
    });
  });
});

<form class="update-project" method="POST" action="/update-project">
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">ID</span>
    <input type="text" class="form-control" name="id" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value="<%= project.id %>" disabled />
  </div>
  <a type="cancel" class="btn btn-secondary" href="/projects">Cancel</a>
  <button type="submit" class="btn btn-primary float-right">Submit</button>
  <a id="delete" type="delete" class="btn btn-danger" href="/projects"> DELETE </a>
</form>

Answer 1

我会尽量使用同事在评论中留下的所有信息来回答。

我们需要：

1 - 获取点击按钮。
2 - 调用 event.preventDefault() 以避免因 <form method="POST" action=...>.
而刷新 3 - 对“点击”事件执行 ajax 请求。
4 - 在 ajax 回调中执行重定向。

一步一步：

1 - 我将从 <a id="delete" type="delete" class="btn btn-danger" href="/projects"> DELETE </a>

中删除 href="/projects"

2 - 在“点击”回调的第一行添加 event.preventDefault()。

3 - 在 ajax 回调的第一行添加 window.location.replace('/projects')。

所有这一切之后它看起来像：

<form class="update-project" method="POST" action="/update-project">
  <div class="input-group mb-3">
    <span class="input-group-text" id="inputGroup-sizing-default">ID</span>
    <input type="text" class="form-control" name="id" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default" value="<%= project.id %>" disabled />
  </div>
  <a type="cancel" class="btn btn-secondary" href="/projects">Cancel</a>
  <button type="submit" class="btn btn-primary float-right">Submit</button>
  <a id="delete" type="delete" class="btn btn-danger"> DELETE </a>
</form>

$(document).ready(function() {
  $('#delete').click(function(event) {
    event.preventDefault();
    var settings = {
      url: `http://localhost:3000/projects/${project.id}>`,
      method: 'DELETE',
      timeout: 0,
    };

    $.ajax(settings).done(function() {
      window.location.replace('/projects');
    });
  });
})

注意：我还想补充一点，HTML结构对你想做的事情没有意义。您正在创建一个 HTML 表单，但与此同时，您希望通过 JS 处理表单调用，而不是使用已有的原生 HTML 表单。应该对其进行重构，使其更简洁，更不易出错。

注意 2： 你不应该使用 <a> 标签作为按钮，按钮应该用作按钮，因为它们就是这样:)

Answer 2

问题最终成为我服务器端代码的另一部分。我需要通过 return response.redirect(303, '/projects');

return express js router.put 中的状态代码

const express = require('express');
const ProjectModel = require('../src/controller/projectController');
const router = express.Router();
const controller = new ProjectModel();

module.exports = (params) => {

  router.delete('/:id', async (request, response) => {
    await controller.deleteById(request.params);
    return response.redirect(303, '/projects');
  });

  return router;
}

在单击事件中 ajax 调用后重定向位置

Redirect location after ajax call in a click event

html

javascript

jquery

ejs

node.js