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

原创 2015年11月20日 19:36:10

登录界面源码:
文件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;
?>   

信息查询界面:





版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

php连接sql server数据库实例

/**   * @author samsun   * @copyright 2007   * php使用mssql库,连接sql server数据库实例  */  $server='ip地址或服务器名...

2.4Bootstrap表单

1、基本案例 2、内联表单 3、水平排列的表单 4、被支持的控件 5、

【php】登录系统与输出浏览者信息

登录系统是懂得操作数据库之后, 再了解一下对session如何操作之后 就应该懂得如何做出来的系统 本系统,与之前在《【ASP】连接Access数据库的登陆系统》(点击打开链接)一文中的asp登录系统...

PHP基于MVC学生信息查询管理系统

  • 2016年03月03日 17:11
  • 9.14MB
  • 下载

边记边学PHP-(七)HTML语言设计注册界面及传递信息的实现

因为今天我刚接触了一个HTML标签,。感觉效果还不错,便使用它设计了整体的框架。然后写了五个php文件,当然都非常简单的语句,php文件里嵌套了HTML语句,设计出了这个注册界面。实现非常简单,没有太...

学生信息管理系统注册页面(first html)

人生第一个试手网页写了简单的学生信息管理系统注册页面的样式: xixixi function a1() { var p1=reg.mim...

使用OSWatcher收集系统信息并生成html

Download OSWatcher  https://support.oracle.com/epmos/faces/DocumentDisplay?_afrLoop=439074068575957...

Python_模拟登录(爬取教务系统信息并制作查询界面)

采用模块: (1)urllib,urllib2,cookielib,BeautifulSoup (2)wx,py2exe 工作步骤: (1)解析网站原理,主要获取post数据、密码加密方式相关信息...

使用PHP制作 简易员工管理系统之七(MVC实现用户信息增、删、改、查)

一、项目目录结构: 二、文件Admin.class.php管理员类
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html和php编写系统登录和信息查询
举报原因:
原因补充:

(最多只允许输入30个字)