ajax+node前后端交互实战（含详细代码以及注释）

最新推荐文章于 2023-06-01 08:34:57 发布

Edasi

最新推荐文章于 2023-06-01 08:34:57 发布

阅读量992

点赞数 5

分类专栏： js基础 ajax

本文链接：https://blog.csdn.net/Edasi/article/details/105938501

版权

js基础同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

ajax

4 篇文章 0 订阅

订阅专栏

先看看完成后效果
在这里插入图片描述
点击登录后进入登录页面

账号错误或者无账号点击注册图为登录成功后页面

注册页面

点击修改或保存后出现编辑页面

这里是数据库里的两张表

上面一张是后台管理表下面一张是登录的账号和密码信息
在这里插入图片描述
添加了cookie防止直接进入
这里是主要文件
包括一些文件作用的描述
ajax封装代码

/**
 *如果是默认参数 就可以不传
 * @param method 请求的方法
 * @param url 请求的地址
 * @param data 发送的数据
 * @param success 数据请求成功以后，需要处理的业务逻辑 就是一个函数块
 * return undefined
 */
function ajax(options) {
    // 给method默认值  默认为get
    var method = options.method || 'get';
    //  发送请求
    var xhr = null;
    try {
        xhr = new XMLHttpRequest();
    } catch (e) {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    if (method.toLowerCase() === 'get') {
        xhr.open('get', options.url + "?" + options.data, true);
        xhr.send();
    } else if (method.toLowerCase() === 'post') {

        xhr.open('post', options.url, true);
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(options.data);
    } else {
        console.log("请求方式不正确")
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var arr = JSON.parse(xhr.responseText);
            options.success && options.success(arr);
        }

    }
}

后台相关代码

var http = require('http');                 //引入http模块
var url = require('url');                   //引入url模块
var fs = require('fs')                      //引入fs模块
var querystring = require('querystring');   //引入querystring模块
var cookie = require('cookie');             //引入cookie模块
var mysql = require('mysql');               //引入数据库
//创建一个连接 
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'ajaxdemo'
});
var app = http.createServer(function (req, res) {          //创建实例
    var url_obj = url.parse(req.url);
    if (url_obj.pathname === '/') {             //这里是一个路由过程
        render('./template/index.html', res);
        return;
    }
    //处理注册的逻辑
    if (url_obj.pathname === "/register" && req.method === "POST") {
        var user_info = '';
        req.on("data", function (chunk) {
            user_info += chunk;
        });
        req.on("end", function (err) {
            if (!err) {
                // console.log(user_info);
                var user_obj = querystring.parse(user_info);
                res.setHeader('content-type', 'text/html;charset=utf-8');
                //判断是否为空
                if (user_obj.password !== user_obj.repassword) {
                    res.write('{"status":1,	"message":	"两次输⼊密码不⼀致"}', 'utf-8');
                    res.end();
                    return;
                }
                if (user_obj.password == '' || user_obj.username == '') {
                    res.write('{"status":1,	"message":	"⽤户名和密码不能为空"}', 'utf-8');
                    res.end();
                    return;
                }
                //把信息写入数据库
                var sql = 'insert into admin(username,password) value("' + user_obj.username + '","' + user_obj.password + '")'
                connection.query(sql, function (error, result) {
                    //如果没有错误，并且result的长度不为0 返回注册成功
                    if (!error && result && result.length !== 0) {
                        res.write('{"status":0,"message": "注册成功"}', 'utf-8');
                        res.end();
                        return;
                    }
                })
            }
        })
        return;
    }
    //处理登录的逻辑
    if (url_obj.pathname === '/login' && req.method === 'POST') {
        var user_info = '';
        req.on('data', function (chunk) {
            user_info += chunk;
        })
        res.setHeader('content-type', 'text/html;charset=utf-8');
        req.on('end', function (err) {
            if (!err) {
                var user_obj = querystring.parse(user_info);
                var sql = 'SELECT * FROM admin WHERE username = "' + user_obj.username + '" AND password = "' + user_obj.password + '"'
                //把username和password拿到数据库中作比对
                connection.query(sql, function (error, result) {
                    // console.log(result);
                    //如果查询出数据说明可以登陆 否则表示不可以
                    if (!error && result && result.length !== 0) {
                        //在返回成功信息的时候需要设置一个cookie 带回到浏览器
                        res.setHeader('Set-Cookie', cookie.serialize('isLogin', "true"));
                        res.write('{"status":0, "message":"登录成功"}', 'utf-8');
                        res.end();
                    } else {
                        res.write('{"status":1, "message":"用户名或者密码错误"}', 'utf-8');
                        res.end();
                    }
                })
            }
        })
        return
    }
    //返回数据表格
    if (url_obj.pathname === '/list' && req.method === 'GET') {

        var sql = "SELECT * FROM user";
        connection.query(sql, function (error, result) {
            if (!error && result) {
                // console.log(result);
                var arrstr = JSON.stringify(result);
                // console.log(arrstr);
                res.setHeader('content-type', 'text/html;charset=utf-8');
                res.write('{"status":0,	"data":	' + arrstr + '}', 'utf-8');
                res.end();
                return;
            }

        })
        return
    }
    //添加用户信息
    if (url_obj.pathname === "/adduser" && req.method === "POST") {
        //  接收前端传过来的数据
        var user_info = '';
        req.on("data", function (chunk) {
            user_info += chunk;
        });
        req.on("end", function (err) {
            if (!err) {
                //  把查询字符串 username=123&password=123 转化成对象
                var user_obj = querystring.parse(user_info);
                //写入数据库
                var sql = 'INSERT INTO user VALUE(' + null + ',"' + user_obj.username + '","' + user_obj.email + '",' +
                    '"' + user_obj.phone + '", "' + user_obj.qq + '")';
                connection.query(sql, function (error, result) {
                    res.setHeader('content-type', 'text/html;charset=utf-8');
                    console.log(error);
                    if (!error && result && result.length !== 0) {
                        res.write('{"status":0,	"message":"添加成功"}', 'utf-8');
                        res.end();
                        return;
                    } else {
                        res.write('{"status":1,	"message":"添加失败"}', 'utf-8');
                        res.end();
                        return;
                    }
                })
            }
        })
        return;
    }
    //修改用户信息
    if (url_obj.pathname === '/update' && req.method === 'POST') {
        //接收数据
        var user_info = '';
        req.on('data', function (chunk) {
            user_info += chunk;
        })
        //更新数据
        req.on('end', function (error) {
            if (!error) {
                var user_obj = querystring.parse(user_info);
                var sql = 'UPDATE user SET username="' + user_obj.username + '",' +
                    'email="' + user_obj.email + '",qq="' + user_obj.qq + '" WHERE id =' + Number(user_obj.id);
                console.log(sql);
                connection.query(sql, function (error, result) {
                    res.setHeader('content-type', 'text/html;charset=utf-8');
                    if (!error && result && result.length !== 0) {
                        res.write('{"status":0,	"message":"编辑成功"}', 'utf-8');
                        res.end();
                        return;
                    } else {
                        res.write('{"status":1,	"message":"编辑失败"}', 'utf-8');
                        res.end();
                        return;
                    }
                })
            }
        })
    }
    //删除用户信息
    if (url_obj.pathname === '/delete' && req.method === 'POST') {
        //接收到id
        var user_info = '';
        req.on('data', function (chunk) {
            user_info += chunk;
        })
        req.on('end', function (error, result) {
            if (!error) {
                var user_obj = querystring.parse(user_info);
                var sql = 'DELETE FROM user WHERE id=' + Number(user_obj.id);
                connection.query(sql, function (error, result) {
                    res.setHeader('content-type', 'text/html;charset=utf-8');
                    if (!error && result && result.length !== 0) {
                        res.write('{"status":0,	"message":"删除成功"}', 'utf-8');
                        res.end();
                        return;
                    } else {
                        res.write('{"status":1,	"message":"删除失败"}', 'utf-8');
                        res.end();
                        return;
                    }
                })
            }
        })
    }
    //获取cookie和设置cookie
    if (url_obj.pathname === "/admin.html") {
        //获取到cookie 如果有对应到登录标识 就返回admin.html页面 如果没有就返回错误页面
        //在登录成功返回信息的时候需要设置cookie 带回到浏览器
        //返回的admin.html的时候做验证
        if (cookie.parse(req.headers.cookie || '').isLogin === "true") {
            render("./template/admin.html", res);
        } else {
            render("./template/error.html", res);
        }
        return;
    }
    //退出登录
    if (url_obj.pathname === "/logout") {
        //  把isLogin 设置成其他
        res.setHeader('Set-Cookie', cookie.serialize('isLogin', ""));
        render("./template/index.html", res);
        return
    }
    render('./template' + url_obj.pathname, res);
});
app.listen(3000, function (err) {
    if (!err) {
        console.log('running');          //端口监听  所用端口3000
    }
})
function render(path, res) {
    fs.readFile(path, 'binary', function (err, data) {//utf-8 改成 binary  所有都转化为二进制的形式这样图片也可以加载，但是这样的话要将write后面也转换成2进制
        if (!err) {
            res.write(data, 'binary');
            res.end()
        }
    })
}

数据库配置

var mysql = require('mysql');
//创建一个连接 
var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'ajaxdemo'
});

//连接数据库
connection.connect(function (err) {
    if (err) {
        console.error('error connecting: ' + err.stack);
        return;
    }
    console.log('connectde as id ' + connection.threadId);
})

//执行查询操作
//第一个参数是错误 第二个是返回的结果
connection.query("SELECT * FROM admin",function(error,result){          
    console.log(result);
})

后台管理页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="./css/simplecss.css">
    <link rel="stylesheet" href="./css/admin.css">
    <script src="js/ajax.js"></script>
</head>

<body>
    <div class="nav">
        <div class="container">
            <div class="row">
                <div class="col-md-10">
                    <a href="/admin">后台管理系统</a>
                    <a href="" class="btn btn-success" id="add-btn">添加用户</a>
                </div>
                <div class="col-md-2"><a href="/logout">退出系统</a></div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <table class="table table-bordered" id="table">
                    <tr>
                        <th>客户编号</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>电话</th>
                        <th>QQ</th>
                        <th>操作</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <!-- 添加用户面板 -->
    <div class="panel panel-default" id="adduser">
        <div class="panel-heading">
            <div class="panel-title">添加用户</div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-4">姓名</div>
                <div class="col-md-8"><input type="text" id="username"></div>
            </div>
            <div class="row">
                <div class="col-md-4">邮箱</div>
                <div class="col-md-8"><input type="text" id="email"></div>
            </div>
            <div class="row">
                <div class="col-md-4">电话</div>
                <div class="col-md-8"><input type="text" id="phone"></div>
            </div>
            <div class="row">
                <div class="col-md-4">QQ</div>
                <div class="col-md-8"><input type="text" id="qq"></div>
            </div>
        </div>
        <div class="panel-footer">
            <button class="btn btn-primary" id="save-btn">保存</button>
            <button class="btn btn-primary" id="cancel-btn">取消</button>
        </div>
    </div>
    <!-- 编辑用户面板 -->
    <div class="panel panel-default" id="editUser">
        <div class="panel-heading">
            <div class="panel-title">编辑用户信息</div>
        </div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-4">姓名</div>
                <div class="col-md-8"><input type="text" id="edit-username"></div>
            </div>
            <div class="row">
                <div class="col-md-4">邮箱</div>
                <div class="col-md-8"><input type="text" id="edit-email"></div>
            </div>
            <div class="row">
                <div class="col-md-4">电话</div>
                <div class="col-md-8"><input type="text" id="edit-phone"></div>
            </div>
            <div class="row">
                <div class="col-md-4">QQ</div>
                <div class="col-md-8">
                    <input type="text" id="edit-qq">
                    <!-- 当后台需要使用这个input的数据但是又不希望显示出来 -->
                    <input type="hidden" id="edit-id">
                </div>
            </div>
        </div>
        <div class="panel-footer">
            <button class="btn btn-primary" id="edit-save-btn">保存</button>
            <button class="btn btn-primary" id="edit-cancel-btn">取消</button>
        </div>
    </div>
    <script>
        //当admin.html这个页面被浏览器加载的时候，马上要去发送数据请求到后台
        // 让后台返回数据给这个页面，这个页面拿到数据以后，生成table
        ajax({
            method: 'GET',
            url: '/list',
            success: function (result) {
                //在这里生成表格并且把数据放入这里
                console.log(result.data[2]);
                if (result.status === 0) {
                    var oTable = document.getElementById('table');
                    for (var i = 0; i < result.data.length; i++) {
                        var oTr = document.createElement('tr');
                        for (var item in result.data[i]) {
                            var oTd = document.createElement('td');
                            oTd.innerHTML = result.data[i][item];
                            oTr.appendChild(oTd);
                        }
                        //还差一个 这里补上
                        var op = document.createElement('td');
                        op.innerHTML = '<button class="btn btn-primary">修改</button> &nbsp' +
                            '<button href="" class="btn btn-danger">删除</button>'
                        oTr.appendChild(op);
                        oTable.appendChild(oTr);
                    }
                }
            }
        })

        // 点击添加按钮弹出添加对话框
        var addBtn = document.getElementById('add-btn');
        var addUser = document.getElementById('adduser');
        addBtn.onclick = function () {
            addUser.style.display = 'block';
            var left = document.documentElement.clientWidth / 2 - addUser.offsetWidth / 2;
            var top = document.documentElement.clientHeight / 2 - addUser.offsetHeight / 2;
            addUser.style.left = left + 'px';
            addUser.style.top = top + 'px';
            return false;
        }
        var cancelBtn = document.getElementById('cancel-btn');
        cancelBtn.onclick = function () {
            addUser.style.display = 'none';
        }
        var saveBtn = document.getElementById('save-btn');
        saveBtn.onclick = function () {
            var oUser = document.getElementById('username');
            var oEmail = document.getElementById('email');
            var oPhone = document.getElementById('phone');
            var oQq = document.getElementById('qq');
            ajax({
                method: 'POST',
                url: '/adduser',
                data: "username=" + oUser.value + "&email=" + oEmail.value
                    + "&phone=" + oPhone.value + "&qq=" + oQq.value,
                success: function (result) {
                    if (result.status === 0) {
                        alert(result.message);
                        window.location.href = '/admin.html'
                    } else {
                        alert(result.message);
                    }
                }
            })
        }
        //需求：点击修改按钮，弹出对话框
        var editUser = document.getElementById('editUser');
        var oTable = document.getElementById('table');
        var editUsername = document.getElementById('edit-username');
        var editEmail = document.getElementById('edit-email');
        var editPhone = document.getElementById('edit-phone');
        var editQq = document.getElementById('edit-qq');
        var editId = document.getElementById('edit-id');
        oTable.onclick = function (ev) {
            var ev = ev || event;
            //找到所有的td
            var aTd = ev.target.parentNode.parentNode.children;
            console.log(aTd);
            console.log(ev.target);             //这里是修改按钮所在的button标签
            if (ev.target.innerHTML === '修改') {
                //弹出对话框 显示当前行的数据
                editUser.style.display = 'block';
                var left = document.documentElement.clientWidth / 2 - editUser.offsetWidth / 2;
                var top = document.documentElement.clientHeight / 2 - editUser.offsetHeight / 2;
                editUser.style.left = left + 'px';
                editUser.style.top = top + 'px';
                //显示当前行
                editId.value = aTd[0].innerHTML;
                editUsername.value = aTd[1].innerHTML;
                editEmail.value = aTd[2].innerHTML;
                editPhone.value = aTd[3].innerHTML;
                editQq.value = aTd[4].innerHTML;

            }
            if (ev.target.innerHTML === '删除') {
                ajax({
                    method: 'POST',
                    url: '/delete',
                    data: 'id=' + aTd[0].innerHTML,
                    success: function (result) {
                        if (result.status === 0) {
                            alert(result.message);
                            window.location.reload();
                        } else {
                            alert(result.message);
                        }
                    }
                })
            }
            //点击取消 隐藏对话框
            var editCancelBtn = document.getElementById('edit-cancel-btn');
            editCancelBtn.onclick = function () {
                editUser.style.display = 'none';
            }
            //点击保存按钮，将数据发送到数据库
            var editSaveBtn = document.getElementById('edit-save-btn');
            editSaveBtn.onclick = function () {
                ajax({
                    method: 'POST',
                    url: '/update',
                    data: 'username=' + editUsername.value + '&email=' + editEmail.value
                        + '&phone=' + editPhone.value + '&qq=' + editQq.value + '&id=' + editId.value,
                    success: function (result) {
                        if (result.status === 0) {
                            alert(result.message);
                            editId.style.display = 'none';
                            window.location.reload();
                        } else {
                            alert(result.message);
                        }
                    }
                })
            }
        }

    </script>
</body>

</html>

登录页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/ajax.js"></script>
</head>

<body>
    <!-- <h1>欢迎来到登录页面</h1> -->
    <div class="bg"></div>
    <div class="main-right">
        <div class="bgcolor"></div>
        <div class="denglu">账号登录</div>
        <div class="right">
            <div class="dong">
                <div>
                    <div class="username">
                        <label for="username">
                            <div class="f1">登录名:</div>
                        </label>
                        <input type="text" id="username" name="username" id="name" value="" maxlength="32" tabindex="1"
                            placeholder="请输入用户名" style="font-size: small; border-color: #39F;" />
                    </div>
                    <div class="password">
                        <label for="password">
                            <div class="f2">登录密码:</div>
                        </label>
                        <input type="password" id="password" name="passwd" id="passwd" value="" maxlength="32"
                            tabindex="1" placeholder="请输入密码"
                            style="  font-size: small; border-color: #39F; color:black" />
                    </div>
                    <div class="submit">
                        <button type="submit" class="button" tabindex="5" id="btn"><b>登　录</b></button>
                    </div>
                    <div class="register_link">
                        <a href="register.html" tabindex="8" class="bbb">免费注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var oBtn = document.getElementById('btn');
        var oUser = document.getElementById('username');
        var oPass = document.getElementById('password');
        oBtn.onclick = function () {
            ajax({
                method: 'POST',
                url: '/login',
                data: 'username=' + oUser.value + '&password=' + oPass.value,
                success: function (result) {
                    if(result.status === 0){
                        alert(result.message);
                        window.location.href = '/admin.html'
                    }else{
                        alert(result.message);
                    }
                }
            });
        }

    </script>
</body>

</html>

登录页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/ajax.js"></script>
</head>

<body>
    <!-- <h1>欢迎来到登录页面</h1> -->
    <div class="bg"></div>
    <div class="main-right">
        <div class="bgcolor"></div>
        <div class="denglu">账号登录</div>
        <div class="right">
            <div class="dong">
                <div>
                    <div class="username">
                        <label for="username">
                            <div class="f1">登录名:</div>
                        </label>
                        <input type="text" id="username" name="username" id="name" value="" maxlength="32" tabindex="1"
                            placeholder="请输入用户名" style="font-size: small; border-color: #39F;" />
                    </div>
                    <div class="password">
                        <label for="password">
                            <div class="f2">登录密码:</div>
                        </label>
                        <input type="password" id="password" name="passwd" id="passwd" value="" maxlength="32"
                            tabindex="1" placeholder="请输入密码"
                            style="  font-size: small; border-color: #39F; color:black" />
                    </div>
                    <div class="submit">
                        <button type="submit" class="button" tabindex="5" id="btn"><b>登　录</b></button>
                    </div>
                    <div class="register_link">
                        <a href="register.html" tabindex="8" class="bbb">免费注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var oBtn = document.getElementById('btn');
        var oUser = document.getElementById('username');
        var oPass = document.getElementById('password');
        oBtn.onclick = function () {
            ajax({
                method: 'POST',
                url: '/login',
                data: 'username=' + oUser.value + '&password=' + oPass.value,
                success: function (result) {
                    if(result.status === 0){
                        alert(result.message);
                        window.location.href = '/admin.html'
                    }else{
                        alert(result.message);
                    }
                }
            });
        }

    </script>
</body>

</html>

注册页面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="./css/register.css" />
    <script src="./js/ajax.js"></script>
</head>

<body>
    <div class="main_body">
        <div class="bg"></div>
        <div id="mainbody">
            <div id="formwrapper" class="formwrapper">
                <form >
                    <fieldset>
                        <legend>用户注册</legend>
                        <p><strong>您的电子邮箱不会被公布出去,但是必须填写.</strong></P><!-- 在您注册之前请先认真阅读服务条款. -->
                        <div>
                            <label for="Name">用户名</label>
                            <input id="username" type="text" value="" size="25" maxlength="30" class="input_out"" />
                            *(最多30个字符)<br>
                        </div>
                        <div>
                            <label for="password">登录密码</label>
                            <input id="password" type="password" size="25" maxlength="15" class="input_out"
                                />
                            *(最多15个字符)<br>
                        </div>
                        <div>
                            <label for="confirm_password">确认密码</label>
                            <input id="repassword" type="password" size="25" maxlength="15" class="input_out"
                                />
                            *<br>
                        </div>
                        <div>
                            <div class="enter">
                                <input id="reg" type="button" value="提交"class="buttom" />
                                <input type="reset" value="重置" class="buttom" />
                            </div>
                            <a href="index.html" tabindex="8">返回</a>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    
    <script>
        // 1.收集用户发送的信息
        // 2.点击注册，发送信息到后台
        var oUser = document.getElementById('username');
        var oPass = document.getElementById('password');
        var oRePass = document.getElementById('repassword');
        var oRegBtn = document.getElementById('reg');
        //点击注册
        oRegBtn.onclick = function () {
            //这里要做一次前端验证
            ajax({
                method: "POST",
                url: "/register",
                data: "username=" + oUser.value + "&password=" + oPass.value + "&repassword=" + oRePass.value,
                success: function (result) {
                    if(result.status === 0){
                        alert(result.message);
                        window.location.href = '/login.html';
                    }else{
                        alert(result.message);
                    }
                }
            })
        }
    </script>
</body>

</html>

Edasi

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
ajax+node前后端交互实战（含详细代码以及注释）

先看看完成后效果点击登录后进入登录页面账号错误或者无账号点击注册图为登录成功后页面注册页面点击修改或保存后出现编辑页面这里是数据库里的两张表上面一张是后台管理表下面一张是登录的账号和密码信息添加了cookie防止直接进入这里是主要文件包括一些文件作用的描述ajax封装代码/** *如果是默认参数就可以不传 * @param method 请求的方法 ...
复制链接

扫一扫