码迷,mamicode.com
首页 > Web开发 > 详细

ajax练习

时间:2019-12-06 13:54:05      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:module   号码   proc   密码   script   The   hone   body   第三方   

1、主文件(项目目录下)

【app.js】

技术图片
const express=require(‘express‘);
// 引入用户路由器
const userRouter=require(‘./routers/user.js‘);
// 引入商品路由器文件
const productRouter=require(‘./routers/product.js‘);
// 引入存储路由器文件
const cunchuRouter=require(‘./routers/cunchu.js‘);
// 引入ajax路由器文件
const ajaxRouter=require(‘./routers/ajax.js‘);
// 引入第三方中间件
const bodyParser=require(‘body-parser‘);
// 创建web服务器
var server=express();
server.listen(3001);
// 托管静态资源到public目录下ister.html
server.use(express.static(‘public‘));
server.use(express.static(‘learn‘));
// 使用body-parser中间件将post请求数据解析为对象
server.use(bodyParser.urlencoded({
    extended:false
}));
// 把用户路由器挂载到/user
server.use(‘/user‘,userRouter);
// 把商品路由器挂载到/product
server.use(‘/product‘,productRouter);
// 把存储路由器挂载到/cunchu
server.use(‘/cunchu‘,cunchuRouter);
// 把ajax挂载到/learn
server.use(‘/learn‘,ajaxRouter);
View Code

2、路由器文件(新建路由器目录下)

【ajax.js】

技术图片
const express=require(‘express‘);
// 引入连接池
const pool=require(‘../pool.js‘);
// 创建空路由器
var router=express.Router();
// 添加路由


// 0、用户名是否已存在
router.get(‘/checkUname‘,(req,res)=>{
    console.log(‘a‘)
    var $uname=req.query.uname;
    console.log(req.query);
    if(!$uname){
        res.send(‘用户名为空‘);
        return;
    }
    console.log(‘b‘)
    // sql 查询用户展示出来
    pool.query("select * from demp where uname=?",[$uname],(err,result)=>{
        if(err) throw err;
        console.log(result);
        if(result.length>0){
            res.send(‘用户已存在‘);
        }else{
            res.send(‘可以注册‘);
        } 
    });
});


// 1、用户注册
router.get(‘/register‘,(req,res)=>{
    var $uname=req.query.uname;
    if(!$uname){
        res.send(‘用户名为空‘);
        return;
    }
    var $upwd1=req.query.upwd1;
    if(!$upwd1){
        res.send("密码为空");
        return;
    }
    pool.query(‘insert into demp (uname,upwd) values (?,?)‘,[$uname,$upwd1],(err,result)=>{
        if(err) throw err;
        console.log(err);
        if(result.affectedRows>0){
            res.send(‘success‘);
        }else{
            res.send(‘fail‘);
        } 
    });
});


// 2、用户登录的路由
router.get(‘/login‘,(req,res)=>{
    // 获取用户名称和密码
    var $uname=req.query.uname;
    console.log(‘uname is‘+$uname);
    console.log(‘nihao‘);
    
    if(!$uname){
        res.send(‘用户名为空‘);
        return;
    }
    var $upwd=req.query.upwd;
    console.log(‘upwd is‘+$upwd);
    if(!$upwd){
        res.send("密码为空");
        return;
    }
    // res.send("用户名为: "+$uname+"...密码为 "+$upwd);
    pool.query("select * from demp where uname=? and upwd=?",[$uname,$upwd],(err,result)=>{
        if(result.length>0){
            res.send(‘success‘);
        }else{
            res.send(‘fail‘);
        }
    });

});


// 3、查用户表所有数据
router.get(‘/userlist‘,(req,res)=>{
    // res.send(‘find success‘);

    // sql 查询用户展示出来
    pool.query("select * from demp",(err,result)=>{
        if(err) throw err;
        res.send(result);
    });
});

// 4、模拟学子商城注册需求
router.post(‘/checkUsername‘,(req,res)=>{

    // 获取用户名称和密码
    console.log(‘123‘);
    var $uname=req.query.username;
    console.log(‘111‘);
    // 判断用户名不为空
    if(!$uname){
        res.send("用户名为空");
        return;
    }
    var $password1=req.query.password1;
    // 判断密码不为空
    if(!$password1){
        res.send("密码为空");
        return;
    }
    var $password2=req.query.password2;
    // 判断确认密码不为空
    if(!$password2){
        res.send("确认密码为空");
        return;
    }
    
    // 判断密码和确认密码一致
    if($password2==$password2){
        pass;
    }else{
        res.send("两次密码输入不一致");
        return;
    }

    var $email=req.query.email;
    // 判断电子邮件不为空
    if(!$email){
        res.send("email为空");
        return;
    }
    // 判断电话号码为空
    var $phone=req.query.phone;
    if($phone){
        res.send("phone为空");
        return;
    }

    // sql查询用户是否存在
    pool.query("select * from demp where uname=?",[$uname],(err,result)=>{
        if(err) throw err;
        if(result.length>0){
            res.send(‘用户名已存在,请重新输入‘);
        }else{
            res.send(‘success‘);
        }
    });

});




// 导出
module.exports = router;
View Code

3、静态资源页面(新建托管静态资源目录下)

【user_list.html】

技术图片
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

        <div>
            用户名称:<input type="text" id="uname">
        </div>
        <div>
            用户密码:<input type="password" id="upwd">
        </div>
        <input type="button" value="登录" onclick="login()">
        <div id="d1"></div>
            
    <script>
        function login(){
            // 1、创建异步对象xhr
            var xhr=new XMLHttpRequest();
            console.log(xhr);
            // 2、绑定监听
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    var result=xhr.responseText;
                    d1.innerHTML=result;
                }
            }
            // 3、打开链接,创建请求
            var un=uname.value;

            var up=upwd.value;

            var url="/learn/login?uname="+un+"&upwd="+up;

            xhr.open("get",url,true);
            // 4、发送请求
            xhr.send(null);

        }
    
    </script>

</body>
</html>
View Code

4、数据库连接池(项目目录下)

【pool.js】

技术图片
const mysql=require(‘mysql‘);
// 创建连接池对象
var pool=mysql.createPool({
    host:‘127.0.0.1‘,
    port:‘3306‘,
    user:‘root‘,
    password:‘root‘,
    database:‘xx‘,
    connectionLimit:20
});
// 导出连接池对象
module.exports=pool;
View Code

 

 

总结:

【get请求】

前端:

    <script>
        function login(){
            // 1、创建异步对象xhr
            var xhr=new XMLHttpRequest();
            console.log(xhr);
            // 2、绑定监听
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    var result=xhr.responseText;
                    d1.innerHTML=result;
                }
            }

       // 3、打开链接,创建请求 var un=uname.value; var up=upwd.value; var url="/learn/login?uname="+un+"&upwd="+up; xhr.open("get",url,true);
      // 4、发送请求 xhr.send(null); } </script>

服务端:

router.get(‘/login‘,(req,res)=>{
    

  // 获取用户名称和密码 var $uname=req.query.uname;if(!$uname){ res.send(‘用户名为空‘); return; } var $upwd=req.query.upwd;if(!$upwd){ res.send("密码为空"); return; } // res.send("用户名为: "+$uname+"...密码为 "+$upwd); pool.query("select * from demp where uname=? and upwd=?",[$uname,$upwd],(err,result)=>{ if(result.length>0){ res.send(‘success‘); }else{ res.send(‘fail‘); } }); });

【post请求】

前端:

  <script>// 创建异步对象
        var xhr=new XMLHttpRequest();// 打开链接,创建请求
        xhr.open("post","/cunchu/sc?",true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

     // 发送请求      xhr.send(result);

// 绑定监听 xhr.onreadystatechange=function(){   if(xhr.readyState==4&&xhr.status==200){ var result=xhr.responseText; console.log(result); } } } </script>

 

服务端:

router.post(‘/sc‘,(req,res)=>{
    var obj=req.body;

  // 执行命令
  for (let key in obj) {
  // 执行命令 process.exec(key,
function(err){ console.log(err)      //当成功是error是null  }) } res.send({code:100}); });

 

 

ajax练习

标签:module   号码   proc   密码   script   The   hone   body   第三方   

原文地址:https://www.cnblogs.com/hd-test/p/11994483.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!