查看: 294|回复: 0

[PHP代码] AJAX实现登录界面

发表于 2017-1-11 12:00:02

使用php跳转界面和AJAX都可实现登录界面的跳转的登录失败对的提醒。但是,php跳转的方式

需要额外加载其他界面,用户体验差。AJAX可实现当前页面只刷新需要的数据,不对当前网页进行

重新加载或者是跳转。

做一个简单的登录界面:

  1. <div id="">
  2. 用户名 :
  3. <input type="text" name="" id="uid" value="" />
  4. </div>
  5. <div id="">
  6. 密 码 :
  7. <input type="text" name="" id="pwd" value="" />
  8. </div>
  9. <div id="">
  10. <input type="button" name="" id="denglu" value="登录" />
  11. </div>
复制代码

  

然后是js代码,使用jq比较简单,所以要先引入jq文件包。

其次获取用户名和密码的值:

  1. var uid = $("#uid").val();
  2. var pwd = $("#pwd").val();
复制代码

  

设置好之后就可以进行AJAX的设置了:

  1. $.ajax({
  2. type: "post",
  3. url: "dengluchuli.php",
  4. data: {
  5. u: uid,
  6. p: pwd
  7. },
  8. dataType: "TEXT",
  9. success: function(r) { //r为返回值
  10. if(r.trim() == "y") { //y为 url跳转网页中传回的值。
  11. window.location.href = "跳转界面";
  12. } else {
  13. alert("用户名或密码错误");
  14. }
  15. }
  16. });
复制代码

  

  1. <strong>dengluchuli.php:</strong>
复制代码
  1. <?php
  2. include("AJAXLOGIN.class.php");
  3. $dd = new LoGin($_POST["u"],$_POST["p"]);
  4. $ae = $dd::logi("login","username","password","name"); //分别是数据库中的 表名,表中的用户名,密码,姓名(数据从数据库中导入)
  5. ?>
复制代码

  

这里我引入了一个登录类(AJAXLOGIN.class.php),是为了以后方便使用:

  1. <?php
  2. class DBDA
  3. {
  4. public $host="localhost";
  5. public $uid = "root";
  6. public $pwd = "";
  7. public $dbname = "12345";
  8. //成员方法
  9. public function Query($sql,$type=1)
  10. {
  11. $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
  12. $r = $db->query($sql);
  13. if($type==1)
  14. {
  15. return $r->fetch_all();
  16. }
  17. else
  18. {
  19. return $r;
  20. }
  21. }
  22. }
  23. class LoGin
  24. {
  25. public static $uid ;
  26. public static $pwd ;
  27. function __construct($x,$y)
  28. {
  29. self::$uid = $x;
  30. self::$pwd = $y;
  31. }
  32. static function logi ($table,$username,$password,$name){
  33. $db = new DBDA();
  34. $nnn = self::$uid;
  35. $sql = " select $name,$password from $table where $username='$nnn '" ;
  36. $at = $db->Query($sql);
  37. $p = self::$pwd;
  38. if(!empty($p) && $p==$at[0][1])
  39. {
  40. $_SESSION["uid"]= $at[0][0];
  41. echo "y";
  42. }
  43. else{
  44. echo "n";
  45. }
  46. }
  47. }
  48. ?>
复制代码

  

  

登录界面完整代码:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Document</title>
  6. <script src="../jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
  7. </head>
  8. <body>
  9. <div id="">
  10. 用户名 :
  11. <input type="text" name="" id="uid" value="" />
  12. </div>
  13. <div id="">
  14. 密 码 :
  15. <input type="text" name="" id="pwd" value="" />
  16. </div>
  17. <div id="">
  18. <input type="button" name="" id="denglu" value="登录" />
  19. </div>
  20. </body>
  21. <script type="text/javascript">
  22. $("#denglu").click(function() {
  23. var uid = $("#uid").val();
  24. var pwd = $("#pwd").val();
  25. $.ajax({
  26. type: "post",
  27. url: "dengluchuli.php",
  28. data: {
  29. u: uid,
  30. p: pwd
  31. },
  32. dataType: "TEXT",
  33. success: function(r) {
  34. if(r.trim() == "y") {
  35. window.location.href = "ppp.php";
  36. } else {
  37. alert("用户名或密码错误");
  38. }
  39. }
  40. });
  41. })</script>
  42. </html>
复制代码

  



回复

使用道具 举报