异步登录（包含前后端：post请求）

最新推荐文章于 2024-08-18 20:11:44 发布

咸鱼-咸鱼-咸鱼

最新推荐文章于 2024-08-18 20:11:44 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/qazwsx_edc1/article/details/80948558

版权

在public平级目录中添加一个文件夹myPro,同时在routes文件中添加一个myPro.js文件
   1.在app.js中托管静态资源，挂路由
    托管：app.use(express.static('myPro'));
    路由：
        var myPro=require('./routes/myPro.js');
        app.use('/myPro',myPro);
   2.ajax登录功能（post）
     在myPro文件夹中创建一个common.js,在common.js中编写$()和createXhr()函数。

3.用户数据的展示，在myPro.js中将用户表所有数据查询出来响应给前端。

后台：myPro.js文件

const express=require('express');
var router=express.Router();

//导出
module.exports=router;

前端：01-ajaxlogin.html文件

<!doctype html>
<html>
<head>
    <title>ajaxlogin</title>
    <meta charset="utf-8">
    <style></style>
</head>
<body>
     <p>
      用户名称：<input type="text" id="uname">
     </p>
     <p>
      用户密码：<input type="password" id="upwd">
     </p>
     <p>
       <input type="button" value="登录" οnclick="ajaxlogin()">
     </p>
     <script src="common.js"></script>
     <script>
       function ajaxlogin(){
         //1.创建异步对象
         var xhr=createXhr();
         //2.监听
         xhr.onreadystatechange=function(){
          if(xhr.readyState==4&&xhr.status==200){
            var res=xhr.responseText;
console.log(res);
            alert(res);

          }
         }
         //3.打开连接
         xhr.open("post","/myPro/ajaxlogin",true);
         //增加：消息头
         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         //4.发送请求
         var uname=$("uname").value;
         var upwd=$("upwd").value;
         var url="uname="+uname+"&upwd="+upwd;
         xhr.send(url);
       }

     </script>
</body>
</html>