为什么这个AJAX调用不重定向到' /login ' URL?

Question

我正在制作一个带有把手的Node Express应用程序。

我在控制台上打印了一条成功消息，但URL没有更改为/login，因此页面从未被渲染，尽管，当我手动在浏览器中输入URLlocalhost:3000/login时，我可以看到我的登录页面被渲染。

因此，我想知道为什么AJAX不工作。

index.handlebars:

<a class="btn" id="login" target="login">Login</a>

login.handlebars:

<input placeholder="Email" name="email" id="email" type="text">
<input placeholder="Password" name="password" id="password" type="password">

index.js:

const baseUrl = 'http://localhost:3000';
$("a[id='login']").click(function(){
$.ajax({
url: `${baseUrl}/login`,
method: 'GET',
success(){
console.log('success');
},
error(e){
console.log(e);
}
});
});

路线文件:

router.get('/login', function(req, res)=>{
try{
res.render('login');
}
catch(e){
res.status(401).json({
message: 'Failed'
});
}
});

Answer 1

Ajax调用只是向服务器发送请求并将响应返回给Javascript。它本身不会改变浏览器窗口中的任何内容。如果您想在ajax调用后转到/login页面，那么您可以通过在浏览器Javascript中设置window.location = "/login"来告诉浏览器转到/login。

但是，看起来你真正想做的是改变窗口位置，而不是使用ajax调用，因为ajax调用本身除了呈现登录表单之外什么也不做。

const baseUrl = 'http://localhost:3000';
$("a[id='login']").click(function(){
// now render the login page
window.location = "/login";
});
});

但是，由于所有这些都是将浏览器发送到一个新的网页，因此您甚至不需要Javascript，您只需在页面中使用<a href="/login">Login<a>即可。