使用jquery所封装的ajax时，对应的数据交互（初级）

最新推荐文章于 2023-09-19 11:08:28 发布

Kratial

最新推荐文章于 2023-09-19 11:08:28 发布

阅读量265

点赞数 2

分类专栏： nodejs

本文链接：https://blog.csdn.net/Kratial/article/details/85134053

版权

nodejs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习案例：

准备部分：
（1）定义接口：/user/act=reg(表示注册)
/user/act=login(表示登录)
(2)当地址有后缀如.html /.jpg等等时，表示想要请求的是文件。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录/注册页面</title>
    <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
    <label>用户名:<input type="text" id="user"/></label><br/>
    <label>密码:<input type="password" id="pswd"/></label><br/>
    <input type="button" id="login" value="登录"/>
    <input type="button" id="register" value="注册"/>
    <script>
        $(function(){

            //登录
            $("#login").click(function(){
                let user=$("#user").val();
                let pswd=$("#pswd").val();
                $.ajax({
                    url:'/user',
                    type:'get',
                    dataType:'json',
                    data:{'act':'login','user':user,'pswd':pswd},
                    success(data){
                        console.log(data);
                        if(data.ok==true){
                            window.location.href='main.html';
                        }else{
                            alert("登录失败的原因:"+data.msg);
                        };
                    },
                    error(err){
                        console.log("出错了:"+err);
                    }
                })
            });
            //注册
            $("#register").click(function(){
                let user=$("#user").val();
                let pswd=$("#pswd").val();
                $.ajax({
                    url:'/user',
                    type:'get',
                    dataType:'json',
                    data:{'act':'reg','user':user,'pswd':pswd},
                    success(data){
                        console.log(data);
                        if(data['ok'==true]){
                            alert(data['msg']);
                        }else{
                            alert(data['msg']);
                        }
                    },
                    error(err){
                        console.log("出现错误:"+err);
                    }
                })
            })
        })
    </script>
</body>
</html>

服务器端代码：

const http=require("http");
const urlBoss=require("url");
const path=require("path");
const fs=require("fs");
const querystring=require("querystring");
let dataK={};//用于存放用户提交的信息
http.createServer(function(req,res){
    let str='';//post方式下获得的数据
    req.on('data',function(data){
        str+=data;
    });
    req.on('end',function(){
        let obj=urlBoss.parse(req.url,true);
        let url=obj.pathname;
        let GET=obj.query;
        let POST=querystring.parse(str);
        //let dataK={'tom':123,'liming':456};虚拟数据库
        //读取接口
        if(url==='/user'){
            switch(GET.act){
                case 'login':
                    //判断该用户是否已经存在
                    //若存在已经登录成功，若不匹配则登录失败
                    if(dataK[GET.user]==null){
                        res.write('{"ok":false,"msg":"用户名不存在"}');

                    }else if(dataK[GET.user]!=GET.pswd){
                        res.write('{"ok":false,"msg":"密码不匹配"}');
                    }else{
                        res.write('{"ok":true,"msg":"登陆成功"}');
                    };
                    break;

                case 'reg':
                    //判断该用户是否已经存在，若存在则提示用户已经存在，注册失败
                    if(dataK[GET.user]){
                        res.write('{"ok":false,"msg":"该用户名已经被注册"}');
                    }else{
                        //否则写入数据库注册成功
                        dataK[GET.user]=GET.pswd;
                        res.write('{"ok":true,"msg":"注册成功"}');
                    }
                    break;
                default:
                    res.write('{"ok":false,"msg":"未知的act"}');
                    break;
            }
            res.end();

        }else{//读取文件
            let filename=path.join(__dirname,'www',url);
            fs.readFile(filename,function(err,data){
                if(err){
                    console.log("文件读取失败");
                }else{
                    res.setHeader('Content-Type','text/html;charset=utf-8');
                    res.write(data);
                }
                res.end();
            })
        }
    });
}).listen(8881,function(){
    console.log("the server is running");
});

具体运行过程：
（1）在命令行node server.js启动服务
（2）在浏览器的地址栏中输入http://localhost:8881/index.html
在这里插入图片描述