• ajax 用 get方法 验证登录


    get-login-ajax.html

    ---------------------------------------------

    <body>

    <input type="text" id="uname" >

    <br><br>

    <input type="text" id="upwd">

    <br><br>

    <button onclick="login()">登录</button>

    <script>

    function login(){

    //1 dom接收数据

    var u_uname=uname.value;

    var u_upwd=upwd.value;

    //2.ajax 异步连接服务器

    //2.1创建异步对象

    var xhr=new XMLHttpRequest();

    //2.4创建监听,获取响应数据

    xhr.onreadystatechange=function(){

    if(xhr.readyState==4&&xhr.status==200){

    var result=xhr.responseText;

    alert(result);

    }

    };

    //2.2打开连接创建请求

    var url="http://127.0.0.1:8080/ajax/login_get?uname="+u_uname+"&upwd="+u_upwd;

    xhr.open("get",url,true);

    //2.3 发送请求

    xhr.send();

    };

    </script>

    </body>

    ----------------------------------------------------------------

    router---myajax.js

    ---------

     

     

     

    //创建路由器对象

    const express=require('express');

    //引入连接池模块

    const pool=require('../pool.js');

    //创建路由器对象

    var router=express.Router();

    //测试服务器接收ajax请求的接口

    router.get("/ajaxDemo",(req,res)=>{

    console.log(111);

    res.send("第一个程序");

    });

    //2.测试带参数的get请求

    router.get("/ajaxDemo1",(req,res)=>{

    var $uname=req.query.uname;

    var $upwd=req.query.upwd;

    if(!$uname){

    res.send("用户名没有接收到");

    return;

    }

    if(!$upwd){

    res.send("密码没有接收到");

    return;

    }

    res.send("用户名为"+$uname+"密码为"+$upwd);

    });

    //3.get请求登录接口(应该用Post)

    //http://127.0.0.1:8080/ajax/login_get?uname=yaya&upwd=123456

    router.get("/login_get",(req,res)=>{

    //获取请求中的数据

    var $uname=req.query.uname;

    var $upwd=req.query.upwd;

    //验证数据正确的得到

    if(!$uname){

    res.send("没有获取到用户名称");

    retrun;

    };

    if(!$upwd){

    res.send("没有获取到用户密码");

    return;

    };

    //使用连接池访问数据库

    var sql="select * from xz_user where uname=? and upwd= ?";

    pool.query(sql,[$uname,$upwd],(err,result)=>{

    if(err){throw err };

    if(result.length>0){

    res.send("登录成功");

    }else{

    res.send("用户名或者密码错误");

    };

    });

    });

    //4.post接口请求登录

     

    const bodyParser=require('body-parser');

    //使用body-parser中间件,将post请求的数据格式化为对象;

    router.use(bodyParser.urlencoded({

    extended:false

    }))

    router.post("/login_post",(req,res)=>{

    var $uname=req.body.uname;

    var $upwd=req.body.upwd;

    if(!$uname){

    res.send("用户名不能为空");

    return;

    };

    if($upwd==""){

    res.send("密码不可以为空");

    return;

    };

    var sql="select * from xz_user where uname=? and upwd=?";

    pool.query(sql,[$uname,$upwd],(err,result)=>{

    if(err) {throw err};

    if(result.length>0){

    res.send("登录成功");

    }else{

    res.send("用户名或密码错误");

    };

    });

    });

    //5.使用get获取用户列表

    router.get('/userlist',(req,res)=>{

    pool.query('select * from xz_user',(err,result)=>{

    if(err){ throw err};

    res.send(result);

    });

    });

     

     

    //导出路由器对象

    module.exports=router;

  • 相关阅读:
    Spring+redis整合遇到的问题集以及注意事项
    Map源码学习之HashMap
    评分---五星好评
    下拉复选框
    倒计时按钮—获取手机验证码按钮
    input上传文件个数控制
    ajax请求完之前的loading加载
    获取浏览器滚动距离
    获取浏览器可视区域宽高
    获取元素尺寸宽高
  • 原文地址:https://www.cnblogs.com/sugartang/p/10967488.html
Copyright © 2020-2023  润新知