墨竹小院
代码改变世界

Ajax搭配php实现客户登录！

2011-05-28 12:23  MzXy  阅读(211)  评论(0)    收藏  举报

浏览器端代码

JavaScript代码

<script type="text/javascript">   
$(function()
{   $("#username").blur(function()
{
    if($("#username").val()=="")
    {
        document.getElementById("statuesusername").innerText="*";
       
    }
});
 $("#userpwd").blur(function()
{
    if($("#userpwd").val()=="")
    {
        document.getElementById("statuesuserpwd").innerText="*";
       
    }
});
    $("#close").click(function()
    {if(window.confirm("是否跳转到主页?"))
    {parent.location.href="demo.htm";}
    else
    {alert("已经关闭！");}});
    $("#Login").click(function()
{
    if($("#username").val()==""||$("#userpwd").val()=="")
    {
        alert("用户名或密码不能为空！"); 
    }
    else
    {
      $.ajax({
      type: "POST",
      url: "Login.php",      
      data: "username=" + $('#username').val() + "&password=" + $('#userpwd').val(),
      success: function(data,msg)
      {
      if(msg=="success"&&data=="success")
      { 
      setInterval("Logining()",500);          
      }
      else
      {  
      document.getElementById("stat").innerText="用户名或密码错误!";         
      }
      }
    });
    }
});  
}); 
var Str="登录成功！页面跳转中"; 
var num=1; 
function Logining()
{   
    if(num>5){
        parent.location.href="demo.htm";
    }else{
         Str=Str+".";
         document.getElementById("stat").innerText=Str; 
    }
    num++;
}
</script>

HTML代码

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>测试页面</title>
</head>
<script type="text/javascript" src="jquery1.3.0.js"></script>   
<style type="text/css"> 
.stat{color: red;}
</style>
 <body>
 <div id="login" >
 <span id="stat" class="stat">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
 <table> 
 <tr>
 <td><label>用户名:</label></td>
  <td> <input type="text" id="username" /></td><td id="statuesusername" class="stat"></td>
 </tr>
  <tr>
 <td><label>用户密码:</label></td>
  <td> <input type="password" id="userpwd" /></td><td id="statuesuserpwd" class="stat"></td>
 </tr>
  <tr>
 <td> <input type="button" value="提交" id="Login" /></td>
  <td><input type="button" value="取消" id="close" /></td>
 </tr>
 
 </table>  
</div> 
</body>
</html>

服务器端代码！没有链接数据库

<?php

$stat="";//此处开始处理ajax提交的数据
if($_POST["username"]=="123")
{$stat="success" ;}
else
{$stat="sorry";}
echo $stat;//此$stat即使返回到浏览器端的数据在ajax表现为data
?>