php,mysql登录(session，无加密版，js)

最新推荐文章于 2021-02-28 21:32:37 发布

spfLinux

最新推荐文章于 2021-02-28 21:32:37 发布

阅读量344

点赞数

分类专栏： js php ajax 文章标签： php mysql 登录

js 同时被 3 个专栏收录

137 篇文章 3 订阅

订阅专栏

php

26 篇文章 0 订阅

订阅专栏

ajax

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wel{
			display: none;
		}
	</style>
</head>
<body>
	<div id="login">
		<input type="text" id="uname" placeholder="用户名"><br/>
		<input type="text" id="upwd" placeholder="密码"><br/>
		<input type="button" id="btn_login" value="登录"><br/>
		<span id="login_tip"></span>
	</div>
	<div id="wel">
		<span>欢迎：</span>
		<span id="welUname"></span>
		<a id="logout">退出</a>
	</div>

	<script src="js/ajax.js"></script>
	<script src="js/login.js"></script>
</body>
</html>

ajax.js:

//封装适合各种情况的简化版ajax函数
function ajax({//利用解构，获取将来参数对象中每个属性值
  type,//请求类型: "get"||"post"
  url,//请求的url地址: "xxx.php"
  data,//请求携带的参数: "变量1=值&..."
  dataType,//服务器端返回值类型: "json"||"text"
}){
  //服务器端返回值类型默认为text
  dataType=dataType||"text";
  //只要远程请求，必有延迟，只要延迟，比用promise等待完成后，才执行后续操作
  return new Promise(function(resolve){//.then()
    //AJAX 4步/5步:
    var xhr=new XMLHttpRequest();//1.获得xhr对象
    //如果是get请求，且传入了data参数，才需要拼接url和data为get请求的完整地址
    if(type.toLowerCase()=="get"&&data!==undefined)
      url+="?"+data;
    xhr.open(type,url,true);//2. 建立连接
    //3. 设置请求状态回调函数
    xhr.onreadystatechange=function(){
      //如果请求完成，且成功!
      if(xhr.readyState==4&&xhr.status==200){
        //如果服务器端响应类型不是json，则调用后续resolve操作，并传入原始responseText，做后续处理
        if(dataType.toLowerCase()!="json")
          resolve(xhr.responseText);
        else//如果服务器端响应类型是json，则自动调用JSON.parse转为js对象，再交给resolve函数做后续处理
          resolve(JSON.parse(xhr.responseText));
      }
    }
    //只有type为post，才需要设置请求头
    if(type.toLowerCase()=="post")
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //只有type为post，才需要send时，传入参数
    xhr.send(type.toLowerCase()=="post"?data:null);
  })
}

function getId(id){
	return document.getElementById(id);
}
ajax({
	type:"get",
	url:"php/isLogin.php",
	dataType:"json"
}).then(data=>{
	if(data.ok==0){
		getId("login").style.display="block";
		getId("wel").style.display="none";
	}else{
		getId("login").style.display="none";
		getId("wel").style.display="block";
		getId("welUname").innerHTML=data.uname;
	}
});
btn_login.οnclick=function(){
	var uname=getId('uname').value;
	var upwd=getId('upwd').value;
	ajax({
		type:"post",
		url:"php/login.php",
		data:`uname=${uname}&upwd=${upwd}`,
		dataType:"json"
	}).then(data=>{
		console.log(data);
		if(data.ok==1){
			getId("login").style.display="none";
			getId("wel").style.display="block";
			getId("welUname").innerHTML=uname;
			getId("login_tip").innerHTML="";
		}else{
			getId("login_tip").innerHTML="用户名或密码错误";
		}
	});
}
logout.οnclick=function(){
	ajax({
		type:"get",
		url:"php/logout.php"
	}).then(()=>location.reload(true));
}

init.php:

<?php 

	$conn= mysqli_connect("127.0.0.1","root","","login",3306);
	$sql="SET NAMES UTF8";
	mysqli_query($conn,$sql);
?>

isLogin.php

<?php
header("Content-Type:application/json");
require_once("init.php");
session_start();
@$uid=$_SESSION["uid"];
if($uid){
  $sql="select uname from login_users where uid=$uid";
  $uname=
    mysqli_fetch_row(mysqli_query($conn,$sql))[0];
  echo json_encode(["ok"=>1,"uname"=>$uname]);
}else
  echo json_encode(["ok"=>0]);

<?php
header("Content-Type:application/json");
require_once("init.php");
@$uname=$_REQUEST["uname"];
@$upwd=$_REQUEST["upwd"];
if($uname&&$upwd){
  $sql="select uid from login_users where uname='$uname' and binary upwd='$upwd'";
  $row=mysqli_fetch_row(mysqli_query($conn,$sql));
  if($row){
    session_start();
    $_SESSION["uid"]=$row[0];
    echo json_encode(["ok"=>1]);
  }else
    echo json_encode(["ok"=>0,"msg"=>"用户名或密码错误"]);
}

logout.php:

<?php
	session_start();
	session_unset();
	session_destroy();
?>

spfLinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php,mysql登录(session，无加密版，js)

login.html: Document #wel{ display: none; } 欢迎：退出 ajax.js://封装适合各种情况的简化版ajax函数function ajax({//利用解构，获取将来参数对象中每个属性值 type,//请求类型: "get"||"post"
复制链接

扫一扫