jquery实现ajax用户登陆 PHP代码

yoken 阅读：2052 2010-04-14 11:04:00 评论：0

虽然ajax的弊端非常明显，但却受到越来越多程序员的喜爱。最近注意到有些人在网上找实现ajax用户登陆的代码，在这里把我的和大家分享一下，希望能对大家有所帮助。点击这里下载代码

实现ajax用户登陆主要由四部分组成，1表格-〉2提交表格-〉3验证用户名和密码-〉4根据回馈信息做出相应行动。

1表格的HTML代码，注意表格的id为client_login，以后提交表格时要一致

<form name="client_login" method="post" action="" id="client_login"><div class="client_log"><p class="client_name">用户名</p><input name="username" type="text" id="username"  /><br /><p class="client_name">密码</p><input name="password" type="password" id="password" /><br /><input type="submit" value="登陆" class="submit" id="submit"/><br /><div id="client_feedback"></div></div></form>

2提交表格，我是用jquery来提交表格，所以我们首先加入jquery在header

<script src="jquery.js" type="text/javascript" language="javascript"></script>

提交的具体方法使用代码如下:
要注意代#字号的都是HTML代码中id的名字,关于$post命令，可以在Jquery的官网找到，点击这里查看

<script language="javascript">$(document).ready(function(){$("#client_login").submit(function(){//开始提交用户名和密码，并接收验证回馈$.post("ajax.php",{ client_name:$('#username').val(),client_password:$('#password').val() } ,function(feedback){//第4部分的代码加在此处});return false; });});</script>

css代码

 <style type="text/css">#client_feedback { display:none;}.client_feedback_error{width:200px; border:1px solid #CC0000;background:#ffebe8;font-weight:bold;color:#CC0000; text-align:center;}</style>

3来验证用户名和密码，单独建立了个文件 ajax.php

首先连接到自己的数据库，

 $connection=mysql_connect(”localhost”,”database_user”,”database_password”) or die(”fail to connet database!”.mysql_error());mysql_select_db(”database_name”,$connection) or die(”fail to connet database!”.mysql_error());

然后接收用户名和密码，注意为了安全我使用的md5加密，大家可以根据需要自行修改

 $user_name=$_POST['client_name'];$pass=md5($_POST['client_password']);

接着根据用户名提取密码

$string = “select password from admin where name =’$user_name’”;$query = mysql_query($string) or die(mysql_error());$result = mysql_fetch_array($query);

如果用户名不存在或密码不正确，就反馈invalid
如果都正确，就反馈pass

 $string = “select password from admin where name =’$user_name’”;$query = mysql_query($string) or die(mysql_error());$result = mysql_fetch_array($query);if($result==false){echo “invalid”;//找不到用户名}else{if($result[password]==$pass){echo “pass”;}else{echo “invalid”;//密码不正确}}

4 根据回馈再行动

 if(feedback==’pass’){document.location=’welcome.php’;}else//用户名和密码不正确，就显示错误信息$(”#client_feedback”).removeClass().addClass(’client_feedback_error’).text(’用户名或密码错误！’).fadeIn(1000);