PHP是一门很好的语言,可以很方便的开发web应用程序,下面介绍一下PHP如何通过AJAX方式实现登录功能:
1 login.php
登录界面中,javascript脚本用ajax方式异步请求dologin.php,dologin.php负责用户信息验证(包括验证码,php生成验证码可以自行搜索).登录界面的代码如下:
1 <?php session_start();?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
6 <title>login</title>
7 <link rel="stylesheet" type="text/css" href="CSS/login.css" />
8 <script src="JS/ajaxhelper.js" type="text/javascript"></script>
9 <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
10 <script type="text/javascript">
11 function chkForm() {
12 if (m$('username').value == "") {
13
14 alert('用户名不能为空.');
15 m$('username').focus();
16 return false;
17
18 }
19 if (m$('password').value == "") {
20
21 alert('密码不能为空.');
22 m$('password').focus();
23 return false;
24
25 }
26 if (m$('password').value != "" && m$('username').value != "") {
27
28 var xmlhttp = createRequest();
29 if (xmlhttp) {
30 m$('loading').innerHTML = "<font color='red'>loading...</font>";
31 var username = m$('username').value;
32 var pwd = m$('password').value;
33 var code = m$('txtCode').value;
34 var url = "dologin.php";
35 xmlhttp.open("POST", url, true);
36 xmlhttp.onreadystatechange = ValidateResult;
37 xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
38 xmlhttp.send("username=" + escape(username) + "&password=" + escape(pwd) + "&code=" + escape(code));
39
40 } else {
41 alert('xmlHttp创建失败.');
42
43 }
44
45 function ValidateResult() {
46 if (xmlhttp.readyState == 4) {
47 if (xmlhttp.status == 200) {
48 if (xmlhttp.responseText != "") {
49
50 //window.alert(xmlhttp.responseText);
51 var obj = eval("(" + xmlhttp.responseText + ")");
52 if (obj.result == true) {
53 alert("提示:" + obj.info);
54 window.location = 'index.php';
55
56 } else {
57 alert("错误:" + obj.info);
58
59 }
60 } else {
61 window.alert("从服务器获取失败");
62
63 window.location.reload();
64 }
65 m$('loading').innerHTML = "";
66 }
67 }
68
69 }
70
71
72 }
73
74 }
75
76 function m$(id) {
77 return document.getElementById(id);
78 }
79
80 function changeCode() {
81 var xmlhttp = createRequest();
82 if (xmlhttp) {
83 m$('loading').innerHTML = "<font color='red'>loading...</font>";
84 var dt = new Date().getTime();
85 // alert(dt);
86 var url = "function/imagecode.php?dummay" + escape(dt);
87 xmlhttp.open("GET", url, true);
88 xmlhttp.onreadystatechange = ValidateResult;
89 xmlhttp.send(null);
90
91 } else {
92 alert('xmlHttp创建失败.');
93
94 }
95
96 function ValidateResult() {
97 if (xmlhttp.readyState == 4) {
98 if (xmlhttp.status == 200) {
99 var dt = new Date().getTime();
100 var url = "function/imagecode.php?dummay" + escape(dt);
101 m$('imgCode').src = "function/imagecode.php?dummay" + escape(dt);
102 m$('loading').innerHTML = "";
103 }
104 }
105
106 }
107 }
108
109 function showTool() {
110 $('#divToolTip').css("display", "block");
111 }
112
113 function hideTool() {
114 $('#divToolTip').css("display", "none");
115 }
116 window.onload = initPage;
117
118 function initPage() {
119 $('#divToolTip').css("display", "none");
120 }
121 </script>
122 </head>
123 <body>
124 <div style="background-color:#2A3F55; height:80px;">
125
126 </div>
127 <div style="min-height:500px;">
128
129 <div class="left">
130
131 <div style="margin:120px auto auto auto; height:300px; text-align:left">
132 <div style="font-size:26px;color:#2A3F55; text-align:center;">Ajax PHP Demo System
133 <img src="Images/appstorm-icon.png" alt="appcation storm image" style="position:relative;top:-18px; left:-12px; vertical-align:middle; text-align:center;font-size:10px; 65px; height:46px;"/>
134 </div>
135 <br/>
136 <hr style="border:dashed thin #2A3F55;70%; text-align:center;"/>
137 <div style="font-size:13px;color:#999999; margin:20px auto 0 auto; padding-left:200px;">
138 Author:<a href="#" onmousemove="showTool();" onmouseout="hideTool();">wangming</a>
139 </div>
140 <div style="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;">DateTime:2009-9-1</div>
141 <div style="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;">Version:1.0.0</div>
142 <div style="font-size:13px;color:#999999;margin:20px auto auto auto; padding-left:200px;">Email:wangmingemail@163.com </div>
143 <div id="divToolTip">
144 <img src="Images/ming.jpg" height="86px;"/>
145 <span class="authordes">
146 <br/>
147 姓名:wangming<br/>
148 电商06-2<br/>
149 </span>
150
151 </div>
152
153 </div>
154
155 </div>
156
157 <div class="right">
158
159 <form>
160 <br/>
161 <table class="flogin">
162 <tr>
163 <td>用户名:</td>
164 <td><input type="text" name="username" id="username"/></td>
165 <td></td>
166 </tr>
167 <tr>
168 <td>密 码:</td>
169 <td><input type="password" name="password" id="password" /></td>
170 <td></td>
171 </tr>
172 <tr>
173 <td>验证码:</td>
174 <td>
175 <input type="text" name="txtCode" id="txtCode" size="12" />
176 <img src="function/imagecode.php" id="imgCode" alt="image code" height="22px;" style=" vertical-align:bottom;"/>
177 </td>
178 <td><input type="button" class="btnrefresh" onclick="changeCode();" /></td>
179 </tr>
180 <tr>
181 <td></td>
182 <td><input type="button" class="btnlogin" onclick="chkForm();" /></td>
183 <td></td>
184 </tr>
185 <tr>
186 <td></td>
187 <td><span id="loading"></span></td>
188 <td><span id="code"></span></td>
189 </tr>
190
191 </table>
192 </form>
193 </div>
194
195 </div>
196 <div style="background-color:#2A3F55; height:60px; margin:auto 0 0 0; clear:both; text-align:center; line-height:60px; color:#FFFFFF;font-size:12px;">
197 ©Copyright 2015.
198 </div>
199 </body>
200 </html>
2 ajaxhelper.js
1 function createRequest() {
2 try {
3 request = new XMLHttpRequest();
4 } catch (tryMS) {
5 try {
6 request = new ActiveXObject("Msxml2.XMLHTTP");
7 } catch (otherMS) {
8 try {
9 request = new ActiveXObject("Microsoft.XMLHTTP");
10 } catch (failed) {
11 request = null;
12 }
13 }
14 }
15 return request;
16 }
17
18 function getActivatedObject(e) {
19 var obj;
20 if (!e) {
21 // early version of IE
22 obj = window.event.srcElement;
23 } else if (e.srcElement) {
24 // IE 7 or later
25 obj = e.srcElement;
26 } else {
27 // DOM Level 2 browser
28 obj = e.target;
29 }
30 return obj;
31 }
32
33 function addEventHandler(obj, eventName, handler) {
34 if (document.attachEvent) {
35 obj.attachEvent("on" + eventName, handler);
36 } else if (document.addEventListener) {
37 obj.addEventListener(eventName, handler, false);
38 }
39 }
3 dologin.php
1 <?php
2 session_start();
3 header("Content-type:text/html;charset=gb2312");//防止返回的中文乱码
4 $name=$_POST['username'];
5 $pwd=$_POST['password'];
6 $imagecode=$_POST['code'];
7 if(strtoupper($imagecode)==$_SESSION["code"])
8 {
9 include("conn/conn.php");
10 $sql="select studentName,studentPwd from tbstudent where studentId='".$name."'";
11 $result=mysql_query($sql,$conn);
12 if($row=mysql_fetch_assoc($result))
13 {
14 if($pwd==$row['studentPwd'])
15 {
16 $_SESSION['username']=$row['studentName'];
17 //echo "{'result':true,'info':'登陆成功!','code':'".$_SESSION["code"]."'}";
18 echo "{'result':true,'info':'登陆成功!'}";
19
20 }
21 else
22 {
23 echo "{'result':false,'info':'密码错误!'}";
24 }
25 }
26 else
27 {
28 echo "{'result':false,'info':'该用户不存在!'}";
29 }
30 }
31 else
32 {
33 echo "{'result':false,'info':'验证码错误!'}";
34 }
35 ?>
4 conn.php
1 <?php
2 $conn=$mysql_connect("localhost","root", "");
3 mysql_select_db("bbs",$conn);
4 mysql_query("SET NAMES GB2312");
5 ?>
5 user.php
1 <?php
2 class Users {
3 function Users() {
4 }
5 function checkLogin($username, $userpwd) {
6 try {
7 mysql_connect("localhost", "root", "123");
8 mysql_select_db("studentdb");
9 mysql_query("SET NAMES GB2312");
10 $sql = "select userid from tbuser where username='$username' and userpwd='" . md5(trim($userpwd)) . "'";
11 $result = mysql_query($sql);
12 if ($result) {
13 $arr = mysql_fetch_row($result);
14 $uid = $arr[0];
15 if ($uid != "") {
16 return "true|$uid login ok.$sql";
17 mysql_close();
18 } else {
19 return "false|login failed!$sql";
20 mysql_close();
21 }
22 } else {
23 return "false|$result link db failed!";
24 mysql_close();
25 }
26 }
27 catch(Exception $ex) {
28 return "false|$ex";
29 mysql_close();
30 }
31 }
32 function AddUser($name, $pwd) {
33 try {
34 mysql_connect("localhost", "root", "123");
35 mysql_select_db("studentdb");
36 mysql_query("set names gb2312");
37 $sql0 = mysql_query("select userid from tbuser where username='$name'");
38 $info0 = mysql_fetch_array($sql0);
39 $userid = $info0[0];
40 if ($info0 != false) {
41 return "false | $name is exisis.(id:$userid)";
42 }
43 $pwd = md5(trim($pwd));
44 $query = mysql_query("insert into tbuser(username,userpwd)values('$name','$pwd')");
45 $error = mysql_errno();
46 if ($query) {
47 return "true | add ok";
48 } else {
49 return "false | $error";
50 }
51 }
52 catch(Exception $ex) {
53 return "false | $ex";
54 }
55 }
56 function DeleteUser($name) {
57 mysql_connect("localhost", "root", "123");
58 mysql_select_db("studentdb");
59 mysql_query("set names gb2312");
60 $name = trim($name);
61 $sql0 = mysql_query("select userid from tbuser where username='$name'");
62 $info0 = mysql_fetch_array($sql0);
63 if ($info0 != false) {
64 if (mysql_query("delete from tbuser where username='$name'")) {
65 return "true | delete ok.(id:" . $info0[0] . ")";
66 } else {
67 return "false | 删除失败";
68 }
69 } else {
70 return "false | 删除失败 $name 不存在";
71 }
72 }
73 function UpdateUser($id, $name, $pwd) {
74 if (is_numeric(intval(trim($id)))) {
75 if ($id && $name && $pwd) {
76 mysql_connect("localhost", "root", "123");
77 mysql_select_db("studentdb");
78 mysql_query("set names gb2312");
79 $pwd = md5(trim($pwd));
80 $isexists = mysql_query("select * from tbuser where userid='$id'");
81 if (mysql_fetch_array($isexists)) {
82 $sql0 = mysql_query("update tbuser set username='$name',userpwd='$pwd' where userid= $id");
83 if ($sql0) {
84 return "ture | update ok";
85 } else {
86 return "false | 更新失败";
87 }
88 } else {
89 return "false | usrid=$id not exists.";
90 }
91 } else {
92 return "false |id=$id name=$name and pwd=$pwd .At least one of them is null.";
93 }
94 } else {
95 return "false | $id is not type of int.";
96 }
97 }
98 }
99 ?>
与登录无关,只为了记录一下PHP如何在数据库MYSQL上实现CURD操作.
6 效果图
