在单击事件中 ajax 调用后重定向位置
Redirect location after ajax call in a click event
下面的代码应该
- 删除
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>
我会尽量使用同事在评论中留下的所有信息来回答。
我们需要:
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>
标签作为按钮,按钮应该用作按钮,因为它们就是这样:)
问题最终成为我服务器端代码的另一部分。我需要通过 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;
}
下面的代码应该
- 删除
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>
我会尽量使用同事在评论中留下的所有信息来回答。
我们需要:
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>
标签作为按钮,按钮应该用作按钮,因为它们就是这样:)
问题最终成为我服务器端代码的另一部分。我需要通过 return response.redirect(303, '/projects');
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;
}