时间戳

首页 > 解决方案 > nodejs对ajax的响应不在同一页面上打印

javascript - nodejs对ajax的响应不在同一页面上打印

问题描述

我是 nodejs 的初学者，我正在尝试将 nodejs 的响应发送到客户端的 ajax。一切正常，但问题是在客户端收到响应时，会打开一个新页面并且响应显示在该页面上。这意味着ajax的核心功能没有实现。我希望 ajax 响应显示在同一页面上。请帮忙！！下面是我的服务器代码：

    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!=0)
            {
                req.session.loggedin=true;
                req.session.username=username;
                return res.redirect('/home');
            }
            obj={'message':'Incorrect Username and/or Password'};
            obj=JSON.stringify(obj);
            res.send(obj);

        });
    }
});

这是我的客户端代码。我希望将响应显示在 ID 为“wrongdetail”的标签内，但它正在打印在另一页上。下面是我的 jquery ajax 调用：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>		
		<script type="text/javascript">
            $(function(){				
                $('#submitbut').click(function(){
                 	$.ajax({
						type: 'POST',
						dataType: 'json',
                        url: 'http://localhost:3000/auth',						
                        success: function(response) {
                        		$('#wrongdetail').html("<b>"+response.message+"</b>");
                        }
                    });
                });				
            });
        </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 id="submitbut">Login</button>
		</form>	
	</div>
</body>
</html>

标签： javascriptajax

解决方案

推荐阅读