美文网首页nodejs
node.js学习(6)——ajax提交数据练习

node.js学习(6)——ajax提交数据练习

作者: YINdevelop | 来源:发表于2018-09-23 00:31 被阅读17次

    上一节-node.js学习(5)—form提交数据(post)

    1.ajax提交数据练习

    前面我们已经讲了使用form表单get、post方式提交数据和node交互。本节我们做一个综合小🌰。页面为用户输入账号密码可以进行登录注册。我们通过node在后台进行验证用户信息并通过接口返回相对于的信息。


    demo.gif

    目录结构如下:


    Jietu20180922-234358.jpg

    2.定义html

    我们在ajax.html增加下面代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>注册登录</title>
    </head>
    
    <body>
        账号:<input type="text" name="name" class="name" />
        密码:<input type="text" name="pass" class="pass" />
        <button class="register">
            注册
        </button>
        <button class="login">
            登录
        </button>
    </body>
    <script src="jquery-3.3.1.min.js"></script> //jquery事先从网上下载好,后面请求数据需要
    </html>
    

    3.定义接口格式

    在写后端代码之前,需要先定义接口格式,从页面来看,我们需要

    3个接收参数:

    type:str     访问类型,'login'-登录 'reg'-注册
    name:st     账号值
    pass:str        密码值
    
    如{"type":"reg","name":"1","pass":"1111"}
    

    返回值为:

    code:number   返回状态值, 1-成功  0-失败
    msg:str       返回信息  
    
    {如"code":1,"msg":"账户名已存在"}     
    

    4.增加后端代码

    然后我们在server.js增加下面代码:

    const http = require('http');
    const fs = require('fs');
    const querystring = require('querystring');
    const urlFormatter = require('url');
    // 假设dataBase为数据库,用来保存注册的账号信息
    let dataBase={};
    
    http.createServer(function (req, res) {
        let str = '';
        //只有post才会执行该函数
        req.on('data', function (data) {
            str += data;
        });
        
        //get、post都会执行该函数
        req.on('end', function () {
            const obj = urlFormatter.parse(req.url, true);
            const pathname = obj.pathname; //  /ajax.html
            const getData = obj.query; //通过get请求的值,如{'type':'reg',name':'test','pass':1}
            const postData = querystring.parse(str); //通过post请求的值
            const path = `./www${req.url}`;
            
            // 这里假设访问 /user为接口,其他为文件,所以增加if else
            if (pathname == '/user') {
                
                //判断用户方式(登录、注册),这里使用了getData,没有使用postData(即定义了接口使用get传输)进行判断
                switch (getData.type) {
                    case 'reg':
                        // 1.检查用户名是否存在
                        // 2.若不存在在数据库中写入用户名、密码
                        if(dataBase[getData.name]){
                            res.write('{"code":0,"msg":"用户名已经存在"}')
                        }else{
                            dataBase[getData.name]=getData.pass
                            res.write('{"code":1,"msg":"注册成功"}')
                        }
                        break;
                    case 'login':
                        //1.检查用户是否已经注册 
                        // 2.检查密码是否正确
                        if(dataBase[getData.name]==undefined){
                            res.write('{"code":0,"msg":"该用户未注册"}')
                        }else if(dataBase[getData.name]==getData.pass){
                            res.write('{"code":1,"msg":"登录成功"}')
                        }else{
                            res.write('{"code":0,"msg":"密码错误"}')
                        }
                        break;
                    default:
                        res.write('{"code":0,"msg":"未知的类型"}')
                        break;
                }
                res.end();
            } else {
                fs.readFile(path, function (err, data) {
                    if (err) {
                        res.write('404');
                    } else {
                        res.write(data);
                    }
                    res.end();
                });
            }
        });
    
    }).listen(8080)
    

    上面的代码备注大部分解释已经标明。所用的代码都是前面所讲的综合。但是还有几点需要注意。

    • 上面代码的逻辑使用的是getData来进行判断,所以我们后面只能用get方式访问接口。若需要使用post,只需要把判断部分的getData换成postData即可。
    • 实际后端代码不会使用if else这样的方式来判断是否是接口还是文件的,本例只是为了练习之前的代码,并做一个简易的服务端。

    5.前端请求数据

    1. 定义了接口格式,我们知道了请求接口所需要传的参数
    2. 定义了后端代码后,我们知道后端提供的方式为get请求

    那么我们开始增加请求的代码,在ajax.html增加下面js:

    <script>
        // 注册
        $(document).on('click', '.register', function () {
            const name = $(".name").val();
            const pass = $(".pass").val();
            $.ajax({
                type: 'get', //因为接口已经定义为getData接收,所以,这里用get,当然也可以在控制台看见headers是明文传输
                url: '/user',
                data: {
                    'type': 'reg',
                    'name': name,
                    'pass': pass
                },
                // dataType:'jsonp', //这里直接通过端口访问服务器上的ajax.html,所以不需要jsonp跨域
                // jsonpCallback:"cb",
                success: function (data) {
                    const jsonData=$.parseJSON( data ) //json字符串转json
                    alert(jsonData.msg)
                },
                error: function () {
                    alert('请求错误')
                }
            })
        })
    
        // 登录
        $(document).on('click', '.login', function () {
            const name = $(".name").val();
            const pass = $(".pass").val();
            $.ajax({
                type: 'get',
                url: 'http://localhost:8080/user',
                data: {
                    'type': 'login',
                    'name': name,
                    'pass': pass
                },
                // dataType:'jsonp',
                // jsonpCallback:"cb",
                success: function (data) {
                    const jsonData=$.parseJSON( data )
                    alert(jsonData.msg)
                },
                error: function () {
                    alert('请求错误')
                }
            })
        })
    </script>
    

    6.get和post安全性再次验证

    至此,我们前后端代码已经全部完成,demo效果如下,我们也可以从demo里面看出get的明文传输(参数会放置在HTTP请求协议头(headers)中,也就是URL之后;而POST提交的数据则放在实体的主体(request-body)中。)

    get

    demo1.gif

    我们把后端getData换成postData,前端请求get换成post

    post.gif

    下一节-node.js学习(7)—node.js的模块化输入输出

    相关文章

      网友评论

        本文标题:node.js学习(6)——ajax提交数据练习

        本文链接:https://www.haomeiwen.com/subject/zqlfoftx.html