Node.js返回AJAX响应跳转新页面问题求助

嘿，你的问题核心是表单的默认提交行为没被阻止——点击Login按钮时，浏览器不仅触发了你的AJAX请求，还会按照<form>标签的设置自动跳转到新页面提交表单，所以才会在新页面显示响应内容。另外你的AJAX请求还没传递用户名和密码数据，服务端压根拿不到参数，这也得一起修正。

具体修复步骤 #

• 阻止表单默认提交行为：避免浏览器自动跳转页面
• 传递表单数据到服务端：让AJAX请求带上用户名和密码参数
• 优化服务端响应逻辑：简化JSON响应的发送方式

修改后的客户端代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
 $(function(){
     // 监听表单的submit事件（覆盖按钮点击+回车提交两种场景）
     $('.form-content').submit(function(event){
         // 关键：阻止表单默认提交行为
         event.preventDefault();
         
         // 获取输入框的用户名和密码
         var username = $('#usernm').val();
         var password = $('#passwd').val();
         
         $.ajax({
             type: 'POST',
             dataType: 'json',
             url: 'http://localhost:3000/auth',
             // 传递表单数据到服务端
             data: {username: username, password: password},
             success: function(response) {
                 // 将响应内容插入到指定标签中
                 $('#wrongdetail').html("<b>"+response.message+"</b>");
             },
             // 新增错误处理，方便调试
             error: function(xhr, status, error) {
                 console.error('请求出错:', error);
             }
         });
     });
 });
</script>
<!DOCTYPE html>
<html>
<head>
 <title>Login page</title>
</head>
<body>
 <div class="login-form">
 <h3>Sign In</h3>
 <form action="auth" method="post" class="form-content">
 <label for="username"><b>Username</b></label>
 <input type="text" name="username" placeholder="Enter Username ..." id="usernm" required>
 <label for="password"><b>Enter Password</b></label>
 <input type="password" name="password" placeholder="Enter Password ..." id="passwd" required>
 <label for="wrong" id="wrongdetail"></label>
 <button type="submit">Login</button>
 </form>
 </div>
</body>
</html>

修改后的服务端代码 #

app.post('/auth',function(req, res){
 console.log(req.body);
 var username=req.body.username;
 var password=req.body.password;
 var obj={};
 if(username&&password){
     connection.query('select * from signup where username=? and password=?',[username,password],function(err, result){
         if(err) throw err;
         // 修正：判断查询结果是否为空应该用数组长度
         if(result.length !== 0) {
             req.session.loggedin=true;
             req.session.username=username;
             return res.redirect('/home');
         }
         obj={'message':'Incorrect Username and/or Password'};
         // Express会自动将对象序列化为JSON响应，无需手动stringify
         res.send(obj);
     });
 } else {
     // 补充：处理用户名/密码为空的情况
     obj={'message':'Please enter Username and Password'};
     res.send(obj);
 }
});

这样修改后，点击Login按钮就会通过AJAX发送请求，响应内容会直接显示在当前页面的#wrongdetail标签里，不会跳转新页面啦！

内容的提问来源于stack exchange，提问作者user11519775