原生JS+node.js实现简单ajax登录

最新推荐文章于 2023-11-04 16:52:06 发布

hxy941025

最新推荐文章于 2023-11-04 16:52:06 发布

阅读量878

点赞数 2

文章标签：原生JS node.js ajax 登录

本文链接：https://blog.csdn.net/hxy941025/article/details/93929160

版权

html+js：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ajax请求</title>
</head>
<body>
<input type="text" placeholder="User" id="user">
<input type="text" placeholder="Password" id="pwd">
<input type="button" value="登录" onclick="GetData()" />
<div id="res">登录信息返回区域</div>
<script type="text/javascript">
    function GetData(){
        //获取输入值
        var User = document.getElementById('user').value;
        var Pwd = document.getElementById('pwd').value;

        //创建AJAX对象
        var xhr=new XMLHttpRequest();
        //向服务器发送请求，指定请求类型，地址，设置请求头
        xhr.open("POST","http://localhost:7777/",true);
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded' );
        //响应解析完成，将后端返回数据更新在页面上
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("res").innerHTML=xhr.responseText;
                }
            }
        }
        //发送内容
        xhr.send(`User=${User}&Password=${Pwd}`);
    }
</script>
</body>
</html>

node.js：

var http=require("http")
var querystring=require("querystring")


var server=http.createServer(function(req,res){
        var reqBody='';
        // 通过req的data事件监听函数，每当接受到请求体的数据，就累加到post变量
        req.on('data',function (data) {
            reqBody += data;
        });
        req.on('end',function () {//用于数据接收完成后再获取
            var UserInfo = querystring.parse(reqBody);
            res.statusCode=200;
            res.sendDate=false;
            res.setHeader("Content-Type","text/plain");
            res.setHeader("Access-Control-Allow-Origin","http://localhost:63342");
            console.log(UserInfo);
            if(UserInfo.User === 'hxy' && UserInfo.Password === '123'){
                res.write("登录成功");
            }else {
                res.write("登录失败")
            }
            res.end();
        })

});
server.listen(7777,"localhost",function(){
    console.log("开始监听...");
});