小全栈

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;padding:0;}
        #box{width:300px;height:300px;border:1px solid #eee;border-radius:5px;}
        #title{width:300px;height:30px;background:#069;}
        label{line-height:30px;}
        input{width:230px;height:30px;display:block;}
        #show{display:block;line-height:30px;}
    </style>
</head>
<body>
<h1>系统主页</h1>
<div id="box">
    <div id="title"></div>
    <form action="">
        <label for="uname">用户名</label><br/>
        <input type="text" name="" id="uname"><br/>
        <label for="psw">密码</label><br/>
        <input type="text" name="" id="psw">
    </form>
    <button id="btn">登录</button>
    <span id = "show"></span>
</div>
<script>

    btn.onclick = function(){
        var uname = document.getElementById("uname");
        var psw = document.getElementById("psw");
        var show = document.getElementById("show");
        var http;
        if(window.XMLHttpRequest){
            http = new XMLHttpRequest();
        }else{
            http = new ActiveXObject("Microsoft.XMLHttp");
        }
        http.onreadystatechange = function(){
            if(http.readyState == 4&&http.status == 200){
                //var txt = http.responseText;
                //show.textContent = txt;
                console.log(http.responseText);
                var json = JSON.parse(http.responseText);
                console.log(json);
                if(json.login == true){
                    window.location.href = "login.html"
                }else{
                    show.textContent = json.msg;
                }

            }
        }
        http.open("POST","loginapp.php",true);
        http.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        http.send("uname="+uname.value +"&psw="+psw.value);
    }

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

php

<?php
/**
 * Created by PhpStorm.
 * 主要负责用户登录业务的处理
 * 1.获取表单提交的账号+密码【POST】
 * 2.定义SQL语句，发送SQL语句查询数据库
 * 3.判断是否查询到结果，并根据结果返回给前端处理结果{"login":"", "msg":""}
 */
$un = $_POST["uname"];
$ps = $_POST["psw"];
$conn = new mysqli("localhost","root","root","myshop",3308);
$sql = "select * from users";
$res = $conn -> query($sql);
$sql1 = "delete from users where uid = 12";
$res1 = $conn -> query($sql1);
$sql2 = "delete from users where uid = 13";
$res2 = $conn -> query($sql2);
$sql3 = "delete from users where uid = 14";
$res3 = $conn -> query($sql3);

$sql4 = "select * from users where username = '$un' and userpass = '$ps'";
$res4 = $conn->query($sql4);

if($res4->num_rows == 1){
    echo '{"login":true,"msg":"登录成功"}';
}else{
    echo '{"login":false,"msg":"登录失败"}';
}

猜你喜欢