关闭

html和php编写系统登录和信息查询

229人阅读 评论(0) 收藏 举报
分类:

登录界面源码:
文件1名: RequestLogin.html
<!DOCTYPE html PUBLIC>
<!--[if IE 7]>         <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>系统登录</title>
    <style>
    body {height:100px;font-size:16px;color:#048bcc;margin:5%;}
    .divFrame {width:260px;border:solid 1px #666}
    .divFrame .divTitle {padding:5px;background-color:#eee}
    .divFrame .divContent {padding:5px}
    .divFrame .divContent .clsShow {font-size:16px;}
    .btn {border:#666 1px solid;width:80px;}
    .txt {width:150px;margin-bottom:5px;margin-top:5px;}
    .clsError {margin-bottom:5px;margin-top:5px;}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $.ajax({
            url:"Login.html",
            dataType:"html",
            success:function(HTML){
            //将页面内容置入表单
                $("#frmUserLogin").html(HTML);
                $("#btnLogin").click(function(){
                //“登录”按钮单击事件
                    var strTxtName = $("#txtName").val();
                    var strTxtPass = $("#txtPass").val();
                    $.ajax({
                        type:"POST",
                        url:"Login.php",  //登录处理页
                        dataType:"html",
                        //传送请求数据
                        data:{txtName:strTxtName,
                              txtPass:strTxtPass},
                              //登录成功后返回的数据
                        success:function(strValue){  //根据返回值进行状态显示
                            //alert("返回值:"+strValue);
                            if(strValue == 1){
                                $("#frmUserLogin").load("LoginOK.html");
                                //alert("操作提示:登录成功!");
                                $("#divUserInfo").load("getUserInfo.html");
                            }
                            else{
                                $("#divError").show().html("<hr />用户名或密码错误!");
                            }
                        }
                    })
                });
                $("#btnReset").click(function(){
                //“取消”按钮单击事件
                    $("#divError").empty();
                    $("#txtName").empty();
                    $("#txtPass").empty();
                })
            }
        })
    })
   
    </script>
</head>
<body>
<center>
    <form id="frmUserLogin" ></form> 
    <div class="divContent">
        <div id="divUserInfo"></div>
    </div>   
</center>    
</body>
</html>

登录页面:


文件2: Login.php

<?php
$strName = $_POST["txtName"]; //解码姓名字符
$strPass = $_POST["txtPass"];  //解码密码字符
$blnLogin = false;
if($strName == "admin" && $strPass == "123456")
{
    $blnLogin = true;
}
echo $blnLogin;
//return $blnLogin;
?>  



文件3: LoginOK.html

<div class="divFrame">
    <div class="divTitle">
        <span>信息查询</span>
    </div>
    <div class="divContent">
        <div class="clsShow">
            <div>操作提示:登录成功!</div>
            <div style="text-align:right;">
            <input type="button"  onclick="window.location.href='RequestLogin.html';" value="退出登录"/>
            </div>
        </div>
    </div>
</div>

文件4: getUserInfo.html 

<!DOCTYPE html PUBLIC>
<!--[if IE 7]>         <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]>         <html class="no-js ie8"> <![endif]-->
<!--[if IE 9]>         <html class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<!--<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>传统的JS实现AJAX</title>
    <style>
    body {font-size:20px;color:#048bcc;}
    .divFrame {width:260px;border:solid 1px #666}
    .divFrame .divTitle {padding:5px;background-color:#eee}
    .divFrame .divContent {padding:8px}
    .divFrame .divContent .clsShow {font-size:16px;}
    .btn {border:#666 1px solid;color:white;padding:5px;width:100px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    var xmlhttp = null;
    function CreateXMLHTTP()
    {
        if (window.ActiveXObject)
            {
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
        else{
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                alert("初始化XMLHTTP错误!");
            }
          
        }
    }
    
    function GetSendData()
    {
        document.getElementById("divTip").innerHTML="<img alt='' title='loading...' src='./loading.gif'  />";
        var strSendUrl = "userInfo.html?date="+Date();
        CreateXMLHTTP();
        
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById("divTip").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET",strSendUrl,true);
        xmlhttp.send();
    }
   
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">
    <input id="Button1" type="button" onclick="GetSendData()" class="btn" value="获取数据"/>
    </div>
    <div class="divContent">
        <div id="divTip"></div>
    </div>
</div>
    
</body>
</html>-->




<!--<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>load()实现AJAX</title>
    <style>
    body {font-size:20px;color:#048bcc;}
    .divFrame {width:260px;border:solid 1px #666}
    .divFrame .divTitle {padding:5px;background-color:#eee}
    .divFrame .divContent {padding:8px}
    .divFrame .divContent .clsShow {font-size:16px;}
    .btn {border:#666 1px solid;color:white;padding:5px;width:100px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#Button1").click(function(){
            $("#divTip").load("userInfo.html");
        })
    })
   
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">
    <input id="Button1" type="button"  class="btn" value="获取数据"/>
    </div>
    <div class="divContent">
        <div id="divTip"></div>
    </div>
</div>
    
</body>
</html>-->



<!--<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>getJSON()函数获取数据</title>
    <style>
    body {font-size:20px;color:#048bcc;}
    .divFrame {width:260px;border:solid 1px #666}
    .divFrame .divTitle {padding:5px;background-color:#eee}
    .divFrame .divContent {padding:8px}
    .divFrame .divContent .clsShow {font-size:16px;}
    .btn {border:#666 1px solid;color:white;padding:5px;width:100px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#Button1").click(function(){
            $.getJSON("UserInfo.json",function(data){
                $("#divTip").empty();
                var strHTML = "";
                //遍历获取的数据
                $.each(data,function(InfoIndex,Info){
                    strHTML += " 姓名:" +Info["name"] + "<br />";
                    strHTML += " 性别:" +Info["sex"] + "<br />";
                    strHTML += " 邮箱:" +Info["email"] + "<hr />";
                })
                $("#divTip").html(strHTML);  //显示处理后的数据
            });
        })
    })
   
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">
    <input id="Button1" type="button"  class="btn" value="获取数据"/>
    </div>
    <div class="divContent">
        <div id="divTip"></div>
    </div>
</div>
    
</body>
</html>-->



<!--<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>getScript()函数获取数据</title>
    <style>
    body {font-size:20px;color:#048bcc;}
    .divFrame {width:260px;border:solid 1px #666}
    .divFrame .divTitle {padding:5px;background-color:#eee}
    .divFrame .divContent {padding:8px}
    .divFrame .divContent .clsShow {font-size:16px;}
    .btn {border:#666 1px solid;color:white;padding:5px;width:100px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#Button1").click(function(){
            $.getScript("UserInfo.js");
        })
    })
   
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">
    <input id="Button1" type="button"  class="btn" value="获取数据"/>
    </div>
    <div class="divContent">
        <div id="divTip"></div>
    </div>
</div>
    
</body>
</html>-->


<!--<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>get()函数获取数据</title>
    <style>
    body {font-size:20px;color:#048bcc;}
    .divFrame {width:260px;border:solid 1px #666}
    .divFrame .divTitle {padding:5px;background-color:#eee}
    .divFrame .divContent {padding:8px}
    .divFrame .divContent .clsShow {font-size:16px;}
    .btn {border:#666 1px solid;color:white;padding:5px;width:100px;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#fff,EndColorStr=#ece9d8);}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#Button1").click(function(){
            $.get("UserInfo.xml",function(data){
                $("#divTip").empty();
                var strHTML = "";
                $(data).find("User").each(function(){
                    $strUser = $(this);
                    strHTML += "姓名:" + $strUser.find("name").text() + "<br />";
                    strHTML += "性别:" + $strUser.find("sex").text() + "<br />";
                    strHTML += "邮箱:" + $strUser.find("email").text() + "<hr />";
                })
                $("#divTip").html(strHTML);
            })
        })
    })
   
    </script>
</head>
<body>
<div class="divFrame">
    <div class="divTitle">
    <input id="Button1" type="button"  class="btn" value="获取数据"/>
    </div>
    <div class="divContent">
        <div id="divTip"></div>
    </div>
</div>
    
</body>
</html>-->


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>AJAX POST请求</title>
    <style>
    body {font-size:16px;color:#048bcc;}
    .divFrame {width:500px;border:solid 1px #666}
    .divFrame .divTitle {padding:5px;background-color:#eee}
    .divFrame .divContent {padding:5px}
    .divFrame .divContent .clsShow {font-size:16px;}
    .btn {border:#666 1px solid;width:80px;}
    .txt {width:150px;margin-bottom:5px;margin-top:5px;}
    .selSex{width:60px;}
    </style>
    <script src="js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#Button1").click(function(){
            var emailval = 0;
            if($("#checkemail").attr("checked")){
                emailval = 1;}
            else{
                emailval = 0;}
            $.ajax({
                    type:"POST",
                    url:"UserInfo.php",  //登录处理页
                    dataType:"html",
                    //传送请求数据
                    data:{name:$("#txtName").val(),
                          sex:$("#selSex").val(),
                          email:emailval},
                          //登录成功后返回的数据
                    success:function(data){
                        //alert(data);
                        $("#divTip").html(data);
                    }
            })
        })
    })
   
    </script>
</head>
<body>
<form id="frmUserInfo">
<div class="divFrame">
    <div class="divTitle">
    <span>姓名:<input id="txtName" type="text" class="txt" value=""/></span>
    <select id="selSex" class="selSex">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    <input id="checkemail" type="checkbox"  class="checkemail" >显示邮箱</input>
    <input id="Button1" type="button"  class="btn" value="请求数据"/>
    </div>
    <div class="divContent">
        <div id="divTip"></div>
    </div>
</div>
</form>   
</body>
</html>

文件5:  UserInfo.php


<?php
$strName = $_POST["name"];
$strSex = $_POST["sex"];
$strEmial = $_POST["email"];
$strHTML = "<div class=''clsShow>";
if($strName == "阿里淘" && $strSex == "男")
{
    $strHTML .= "<hr />姓名:阿里淘<br />";
    $strHTML .= "性别:男<br />";
    //$strHTML .= "邮箱:ali_tao@163.com";
    if ($strEmial == 1)
    {
        $strHTML .= "邮箱:ali_tao@163.com<br />";
    }
    $strHTML .= '<div style="text-align:right;"><input type="button" value="查看Ta的博客" onclick=""></div><hr />';
}
else if($strName == "李建州" && $strSex == "女")
{
    $strHTML .= "<hr />姓名:李建州<br />";
    $strHTML .= "性别:女<br />";
    //$strHTML .= "邮箱:ali_li@163.com";
    if ($strEmial == 1)
    {
        $strHTML .= "邮箱:ali_li@163.com<br />";
    }
    $strHTML .= '<div style="text-align:right;"><input type="button" value="查看Ta的博客" onclick=""></div><hr />'; 
}
else
{
    $strHTML .= "<hr />没有你要查询的内容!<hr />";
}
$strHTML .= "</div>"; 
echo $strHTML;
?>   

信息查询界面:





0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:14055次
    • 积分:298
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条
    文章分类