通过Ajax的get请求将表单数据传送到数据库（全部保姆级讲解）

最新推荐文章于 2024-04-29 10:40:41 发布

文丁响

最新推荐文章于 2024-04-29 10:40:41 发布

阅读量1.1k

点赞数

文章标签：前端 javascript 开发语言 node.js

本文链接：https://blog.csdn.net/wdx1641670284/article/details/128088101

版权

1.必须在nodejs环境下进行：

在官网直接下载nodejs的最新稳定版 https://nodejs.org/en/

下载完成后直接安装

2.NPM初始化：

npm init 命令初始化项目, 生成package.json文件

2.1在vscod中初始化：

点击终端 > 新建终端 > 找到文件名（cd 加文件名）> 输入npm init

一直点击回车键生成package.json文件内容：

3.安装模块：

npm install 命令用于安装某个模块

允许结果：

4.HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 400px;
            background-color: lightcoral;
            margin: 0 auto;
            box-sizing: border-box;
            padding: 30px;
        }
        .content{
            background-color: #fff;
        }
        .title{
            display:flex;
            justify-content: space-around;
        }
        p{
            font-size: 20px;
            margin: 10px;
        }
        .dl{
            color: orangered;
            font-weight: bold;
        }
        .username,.usermima{
            width: 200px;
            margin: 10px auto;
        }
        input{
            width: 100%;
            height: 25px;
            outline: none;
        }
        .wangji{
            font-size: 12px;
            margin: 5px 0;
            margin-left: 230px;
        }
        .regist{
            width: 200px;
            height: 30px;
            margin: 0 auto;
        }
        button{
            width: 100%;
            height: 100%;
            background-color: red;
            border: 1px solid #fff;
            border-radius: 10px;
            color: #fff;
            line-height: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            <div class="title">
                <p>扫码登陆</p>
                <p class="dl">账户注册</p>
            </div>
                <div class="username">
                    <input type="text" placeholder="邮箱/账号名/登录手机号" class="userName">
                </div>
                <div class="usermima">
                    <input type="password" placeholder="密码" class="userPassword">
                </div>
                <div class="wangji">忘记密码</div>
                <div class="regist">
                    <button>注册</button>
                </div>
        </div>
    </div>
</body>
</html>

5.前端JS部分：

增加了表单验证的正则方法且提示注册成功（数据库中包含的注册信息）


    <script>
         document.querySelector('button').onclick = function (){
            // 每次点击都需要获取用户名和密码
            let userName = document.querySelector('.userName').value;
            // 每次点击都需要获取用户名和密码
            let userPassword = document.querySelector('.userPassword').value;
            if(userName.length < 6){
                alert('用户名不合法');
                return 
            }
            if(!/^[0-9A-Za-z]+$/.test(userPassword)){
                alert('密码不合法');
                return 
            }
            let ajax = new XMLHttpRequest();
            ajax.open('get',`http://127.0.0.1:8080/register?userName=${userName}&userPassword=${userPassword}`);
            ajax.send();
            ajax.onreadystatechange = function ({currentTarget}){
                if(currentTarget.readyState == 4 && currentTarget.status == 200){
                    try {
                        let data = JSON.parse(currentTarget.response);
                        if(data.insertId){
                            alert('注册成功');
                        }
                    }catch(e){
                        console.log(currentTarget.response);
                    }
                }
            }
        }
</script>

6.nodejs部分：

输入前需要运行nodejs部分

// 引入http模块
let http = require('http');
// 创建srever
let server = http.createServer();
// 监听请求
server.on('request', (req,res)=>{
    // 相应格式
    res.setHeader('content-type','text/html;charset=utf-8');
    // 允许跨域
    res.writeHead(200, {
        // cors头,允许跨域，放行所有请求
        "access-control-allow-origin":"*"
    })
    if(req.url.indexOf('register') != -1){
        let url = req.url;
        url = url.split('?')[1];
        url = url.split('&');
        let obj = {};
        url.forEach(item => {
            // decodeURIComponent  中文被编码转换为中文
            obj[item.split('=')[0]] = decodeURIComponent(item.split('=')[1])
        });
        
        // 引入mysql模块
        const mysql = require('mysql');
        // 创建数据库连接
        const con = mysql.createConnection({
            host: 'localhost',
            database: 'web2208',
            user: 'wdx',
            password: 'a1641670284'
        })
        // 打开连接
        con.connect();
        let sesql = `select * from userinfo where userName="${obj.userName}"`;
        con.query(sesql, (err,success) => {
            if(err){
                res.end('语句执行失败，原因'+err)
                // 每次都要关闭数据库连接
                con.end();
            }else{
                if(success.length == 0){
                    // 查询ssql语句
                    let sql = `insert into userinfo (userName,userPassword) values ("${obj.userName}","${obj.userPassword}")`
                    // 运行sql语句
                    con.query(sql,(error,result)=>{
                        if(error){
                            res.end('语句执行失败，原因'+error)
                        }else{
                            res.end(
                                JSON.stringify(result)
                            )
                        }
                        // 每次都要关闭数据库连接
                        con.end();
                    })
                }else{
                    res.end('该用户已被注册')
                    // 每次都要关闭数据库连接
                    con.end();
                }
            }
        })
        
    }else{
        res.end('访问了查询接口')
    }
})
// 启动服务
server.listen('8080','127.0.0.1',()=>{
    console.log('服务启动成功,地址是:http://127.0.0.1:8080/');
})

文丁响

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
通过Ajax的get请求将表单数据传送到数据库（全部保姆级讲解）

点击终端 > 新建终端 > 找到文件名（cd 加文件名）> 输入npm init。npm init 命令初始化项目, 生成package.json文件。npm install 命令用于安装某个模块。在官网直接下载nodejs的最新稳定版。
复制链接

扫一扫