ajax传参

最新推荐文章于 2024-08-03 16:20:05 发布

tjh0001

最新推荐文章于 2024-08-03 16:20:05 发布

阅读量462

点赞数

分类专栏：知识点回顾

知识点回顾专栏收录该内容

60 篇文章

订阅专栏

一、首先构建一个html页面

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>登录动画</title>
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <form class="box">
        <h1>Login</h1>
        <input type="text" name="text" placeholder="Username">
        <input type="password" name="password" placeholder="Password">
        <input type="button" value="登录">
        <input type="button" value="注册">
    </form>
</body>
<script src="js/index.js"></script>
</html>

二、构建一个前端js页面

var btn = document.querySelectorAll("[type=button]");

btn[0].onclick = function(){
    let u = document.querySelector("[type=text]").value;
    let p = document.querySelector("[type=password]").value;
    //创建AJAX对象
    var xhr = new XMLHttpRequest();
    //创建AJAX请求
    xhr.open("post", "http://127.0.0.1:8081/sele");
    //post类型必须加这行代码
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    // 发送AJAX请求
    xhr.send(`username=${u}&password=${p}`);
    // 通过onreadystatechange 方法即可请求监听状态
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) { //判断请求是否完成
            if (xhr.status == 200) { //判断请求是否成功
                var val = xhr.responseText; //获取请求返回的数据
                if(val == "查询成功"){
                    alert("登陆成功！！！");
                }else{
                    alert("登陆失败！！！");
                }
            }
        }
    }

};

btn[1].onclick = function () {
    let u = document.querySelector("[type=text]").value;
    let p = document.querySelector("[type=password]").value;

    var xhr = new XMLHttpRequest();
    xhr.open("post", "http://127.0.0.1:8081/add");
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//必须加这行代码
// 3.发送AJAX请求
    xhr.send(`username=${u}&password=${p}`);
    // 通过onreadystatechange 方法即可请求监听状态
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) { //判断请求是否完成
            if (xhr.status == 200) { //判断请求是否成功
                var val = xhr.responseText; //获取请求返回的数据
                if(val == "添加成功"){
                    alert("注册成功！！！");
                }else{
                    alert("注册失败！！！");
                }
            }
        }
    }
};

三、创建一个数据库模块

var mysql = require('mysql');

function getconection(){
    var connection = mysql.createConnection({
        host: '127.0.0.1',
        user: 'root',
        password: '123456',
        database: 'w1902'
    });
    return connection
};

module.exports = getconection;

四、nodejs接口

var bd = require('./data');
var express = require('express');
var app = express();

//使用bodyParser模块，接收post参数
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());

//设置跨域访问（设置在所有的请求前面即可）
app.all("*", function (req, res, next) {
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    if (req.method == 'OPTIONS')
        res.send(200); //让options尝试请求快速结束
    else
        next();
});
//登录
app.post('/sele',function(req,res){
    var connection = bd();
    connection.connect();
    var sql = `select * from apple where username=? and password=?`;
    var sqlvalue = [req.body.username,req.body.password];
    connection.query(sql,sqlvalue,function(err,sul){
        if(err){
            console.log("数据错误");
        }else{
            if(sul.length>0){
                res.send("查询成功");
            }else{
                res.send("查询失败");
            }
        }
    });
    connection.end();
});
//注册
app.post('/add',function(req,res){
    var connection = bd();
    connection.connect();
    var sql = `insert into apple values(?,?)`;
    var sqlvalue = [req.body.username,req.body.password];
    connection.query(sql,sqlvalue,function(err,sul){
        if(err){
            console.log("数据错误");
        }else{
            if(sul.affectedRows>0){
                res.send("添加成功");
            }else{
                res.send("添加失败");
            }
        }
    });
    connection.end();
});

app.listen(8081, function () {
    console.log("访问地址是：http://127.0.0.1:8081");
});