PHP是一门很好的语言,可以很方便的开发web应用程序,下面介绍一下PHP如何通过AJAX方式实现登录功能:
登录界面中,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 System133 <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; width:65px; height:46px;"/>134 </div>135 <br/>136 <hr style="border:dashed thin #2A3F55;width: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>
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 IE22 obj = window.event.srcElement;23 } else if (e.srcElement) {24 // IE 7 or later25 obj = e.srcElement;26 } else {27 // DOM Level 2 browser28 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 }
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 else22 {23 echo "{'result':false,'info':'密码错误!'}";24 }25 }26 else27 {28 echo "{'result':false,'info':'该用户不存在!'}";29 }30 }31 else32 {33 echo "{'result':false,'info':'验证码错误!'}";34 }35 ?>
1 <?php2 $conn=$mysql_connect("localhost","root", "");3 mysql_select_db("bbs",$conn);4 mysql_query("SET NAMES GB2312");5 ?>
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操作.
5053050
13624467185
400-915-4435