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

来源:互联网 发布:如何关淘宝店铺 编辑:程序博客网 时间:2024/05/14 21:21

登录界面源码:
文件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
原创粉丝点击