时间:2021-07-01 10:21:17 帮助过:16人阅读
ajax(url,method,data,success),一共4个形参,success为一个回调函数,主要作用是将后台的数据传到前台了,这个回调函数很关键。
后端是单入口文件,单入口文件的好处之一是绝对路径的设置是参考该入口文件的,避免因为路径而踩入不必要的坑
index.php
1:$config 一个存放数据库host,port,username,password,database的数组
//数据层 $config=array( ‘db_host‘ => ‘localhost‘, ‘db_port‘ => ‘3306‘, ‘db_user‘ => ‘root‘, ‘db_password‘ => ‘123‘, ‘db_name‘ => ‘talklist‘, );
2:定义一个获取get/post请求参数值的常量
//控制层 define("module_action",$_REQUEST["a"]);
3:mysql的控制层,有两个类,一个是引入数据库连接库的类,另一个是给模型层的传入send方法,send方法是为了把执行状态(code,message)传给前台,send每次执行完,都要echo 模型层给send传的参数,是为了获取responseText 最后要exit(),退出当前脚本;
// mysql库的控制层 class DB{ public static function factory(){ global $config; //mysql库 require_once("./libs/Class/DB_Mysql.class.php"); return DB_Mysql::instance($config); } }
上述代码中DB_Mysql.class.php是mysql库包含DB_Mysql类,DB_Mysql类包含instance方法,instance方法检测当前类是否实例,如果没有实例,就实例当前类并储存起来,且传入$config,如果有实例,就直接return 当前实例对象,实际上实例就是调用当前类的构造函数。保存$config,且执行DB_Mysql类的数据库连接方法connect(),因为是构造函数,所以实例化对象时就会执行构造函数。
class DB_Mysql { private static $instanceObj; private $config ; //盛放的是数据库连接的信息,host port username password databases private function __construct($config) { $this->config = $config; $this->connect(); } public static function instance($config) { if (!self::$instanceObj) { self::$instanceObj = new DB_Mysql($config); } return self::$instanceObj; } //连接数据库 public function connect() { mysql_connect($this->config[‘db_host‘],$this->config[‘db_user‘],$this->config[‘db_password‘]); mysql_select_db($this->config[‘db_name‘]); $this->query("set names ‘utf8‘"); } }
所以我是觉得这段代码是最有趣的。不知道大家是怎样想的。
4:Controller类,是为了为模型层的子级继承父级的Controller类下的send方法,发送数据到前台。
class Controller{ public $db = null; private $ajaxData=array( "code"=>0, "message"=>"", ); public function __construct(){ $this->db = DB::factory(); } public function send($data=array()){ $showdata = array_merge($this->ajaxData,$data); echo json_encode($showdata);//转成json responseText exit(); //输出一个消息并且退出当前脚本 } }
5:加载模型层方法,require_once("./Controller/IndexController.class.php"),get到的参数就是模型层IndexController类的方法
//MVC中的模型层 require_once("./Controller/IndexController.class.php"); //把第一个参数作为回调函数调用,其余参数是回调函数的参数。 call_user_func(array(new IndexController,module_action));
6:在介绍模型层之前,先介绍完数据库文件DB_Mysql.class.php剩下的方法
class DB_Mysql{ //执行sql语句 public function query($sql) { return mysql_query($sql); } public function select($sql) { $query = $this->query($sql); $rs = array(); //将查询的结果以数字1的索引方式存在数组里面 $queryArr = mysql_fetch_array($query, 1); if($queryArr) { $rs[] = $queryArr; } return isset($rs[0])?$rs[0]:false; } }
query方法就不用多讲了,就是执行sql语句 mysql_query(),主要是说了select方法,把select方法单独挑出来就是为了单独执行select sql语句 select * from ...等
单独执行是为了将select语句晒出来的数据fetch到一个数组里面,mysql_fetch_array($query, 1),将查询的结果以数字1的索引方式存在数组里面,最最最关键的是要
判断数据库查到数据了没,查到返回当前查到的数据,没查到就返回一个bool值,为得就是在模型层判断是否查到,return一个状态(code,message),方便前台获取
介绍完这个,就就能很轻松的理解模型层的方法了。
7:模型层IndexController类extends Controller类,并且定义了自己的一些方法和属性
class IndexController extends Controller { /** * @ 用户名验证 传返回值。 * return 0: 表示在数据库没有查到有相同用户名 * return 1: 用户名的长度和类型不合法 * return 2: 表示在数据库查到了相同用户名 * $rs存在: 表示表示用查到了相同的用户名,return 2; */ private function _verifyUserName($username) { if (strlen($username) < 3 || strlen($username) > 10) {return 1;} //查数据库里面的数据 $rs = $this->db->select("SELECT `username` FROM `users` WHERE `username`=‘{$username}‘ LIMIT 1"); if ($rs) {return 2;}else{return 0;} } /** * @ interface 用户名验证return * 前台传来的get参数,选择执行IndexController下来action */ public function verifyUserName() { $username = $_REQUEST[‘username‘]; $code = $this->_verifyUserName($username); switch ($code) { case 0: $this->send(array(‘code‘=>0,‘message‘=>‘恭喜你,该用户名可以注册!‘)); break; case 1: $this->send(array(‘code‘=>1,‘message‘=>‘用户名长度不能小于4个或大于10个字符!‘)); break; case 2: $this->send(array(‘code‘=>2,‘message‘=>‘对不起,该用户名已经被注册了!‘)); break; default: break; } } }
在_verifyUserName中先要判断长度是否合适,再判断数据库是否有相同的username,记住要limit 1 ;
$this->db->select("SELECT `username` FROM `users` WHERE `username`=‘{$username}‘ LIMIT 1");
这句话也很有意思,表单看来是在当前类的db变量下的select方法,别忘了IndexController extends Controller,在当前类找不到db属性,那就是它爸爸那找么,他爸爸身上也是也是没有的
class Controller{ public $db = null; public function __construct(){ $this->db = DB::factory(); } }
所以有趣DB类的factory找,DB::factory()说,我也没有,我给你 return DB_Mysql::instance($config);,那你去DB_Mysql类中去找把,找啊找,终于在DB_Mysql类中找到了select的方法,由此看来找个这个select方法不容易啊,分析一下,我们从模型层中找到了控制层,控制层又去在数据库的控制层找,这样做是为了啥,为的就是模块化管理,数据库的方法就方法数据库类中,互补干扰,修改起来也很容易,这是MVC的魅力,前端MVC大致也如此吧。
好的,那就下一个方法verifyUserName,这个方法主要就是为了send方法,send状态(code,message),让前台获取。用到了流程语句switch case
好的,那验证就结束了,下来就是注册了,注册就是insert into
class IndexController extends Controller{ public function reg() { $username = $_REQUEST[‘username‘]; $password = $_REQUEST[‘password‘];
$code = $this->_verifyUserName($username);
//if($code ==0){$this->sendByAjax(array(‘code‘=>1,‘message‘=>""))}
if ($code !== 0 || strlen($password)<3 || strlen($password) > 15) {
$this->send(array(‘code‘=>1,‘message‘=>‘注册失败!‘));
}
//密码加密,插入数据库里面 $password = md5($password); if (false === $this->db->query("insert into users (username, password) values (‘{$username}‘, ‘{$password}‘)")) { $this->send(array(‘code‘=>1,‘message‘=>‘注册失败!‘)); }else { $this->send(array(‘message‘=>‘注册成功!‘)); } } }
插入帐号,插入密码,执行的是query方法,insert错误,就注册是吧,否则注册成功,记着要讲密码md5加密呢。也很好理解
再之后就是登录方法,注册不仅要check帐号密码是否匹配,更重要是设置cookie,就是为以后的注销做打算
class IndexController extend Controller{ /** * @ 用户登陆 * $username 是帐号 * $password 是密码 * $rs 在数据库中选出所有用户名等于$username的所有信息,mysql_fetch_array($sql,1);放在$rs数组里面 * setcookie(cookiename,cookie的值,cookie的有效期,cookie的服务器路径) */ public function login() { $username = $_REQUEST[‘username‘]; $password = $_REQUEST[‘password‘]; //检测cookie中有没有uid,有则证明已经登录过了。 if (isset($_COOKIE[‘uid‘])) { $this->send(array(‘code‘=>1,‘message‘=>‘你已经登陆过了!‘)); } $rs= $this->db->select("select * from users where username=‘{$username}‘ limit 1"); if ($rs) { if ($rs[‘password‘] != md5($password)) { $this->send(array(‘code‘=>1,‘message‘=>‘密码与帐号不匹配‘)); } else { //1分钟过期 setcookie(‘uid‘, $rs[‘uid‘], time() + 60, ‘/‘); setcookie(‘username‘, $rs[‘username‘], time() + 60, ‘/‘); $this->send(array(‘code‘=>0,‘message‘=>‘登陆成功!cookie有效时间为1min‘)); } } else { $this->send(array(‘code‘=>1,‘message‘=>‘数据库未检测到您的信息‘)); } } }
首先在登录的时候,有用户已经登录,就不能继续登录,这句话得先判断,isset($_COOKIE[‘uid‘]这句话很重要,如何检测是否有用户登录呢,你select * from users
把select到的内容都放入一个数组里面,之前也说了mysql_fetch_array()这个方法了,这是$rs放的就不只有username了,还有password和auto_increment的uid,这就方便了check,首先在数据库的username是否和输入的username一致的情况下再判断password是否一致,如果password一致,那就setcookie了
setcookie(‘uid‘, $rs[‘uid‘], time() + 60, ‘/‘); setcookie(‘username‘, $rs[‘username‘], time() + 60, ‘/‘);
前台检测cookie是否存在,存在就显示注销栏,不存在就不现实注销栏,最后那就是注销了,之前注销也说了,就是清除cookie
class Controller extends Controller{ /** * @ 用户退出 * 通过把失效日期设置为过去的日期/时间,删除一个 cookie * uid不存在的话,则证明就没有登录 */ public function logout() { if (!isset($_COOKIE[‘uid‘])) { $this->send(array(‘code‘=>1,‘message‘=>‘你还没有登陆!‘)); } else { //通过把失效日期设置为过去的日期/时间,删除一个 cookie: setcookie(‘uid‘, "", time() - 60, ‘/‘); $this->send(array(‘code‘=>0,‘message‘=>‘退出成功!‘)); } } }
setcookie(‘uid‘, "", time() - 60, ‘/‘);这句话狠抓那个要,通过把失效日期设置为过去的日期/时间,删除一个 cookie:
if (!isset($_COOKIE[‘uid‘])) {
$this->send(array(‘code‘=>1,‘message‘=>‘你还没有登陆!‘));
}
这句话可有可无,因为你没有uid的时候,注销栏都隐藏了,所以何谈点击,何谈get请求呢,聪明的你肯定想到了。
说了这么多,还没有说JS大法呢。
理解了后台,再去做前台就会很容易了。getelements我就不写了,就要写函数
检测帐号
//校验帐号 username1.onblur=function(){ ajax("guestbook/index.php","get","m=index&a=verifyUserName&username="+this.value,function(data){ var jsondata = JSON.parse(data) verifyUserNameMsg.innerHTML=jsondata.message; console.log(JSON.parse(data)); if(jsondata.code==1 || jsondata.code==2){ verifyUserNameMsg.style.color="red"; btnReg.disabled=true; }else{ verifyUserNameMsg.style.color="green"; btnReg.disabled=false; } }) }
m=index&a=verifyUserName&username="+this.value,这是你get的参数
回调函数有参数data,data就是responseText,就是状态(code,message),就是send的的echo值
code=1 代表格式不对 code=2 代表重名了 code=0代表ok
注册与登录
//注册帐号 btnReg.onclick=function(){ ajax("guestbook/index.php","get","m=index&a=reg&username="+username1.value+"&password="+password1.value,function(data){ alert("注册成功!跳转页面中..."); location.reload(); }) } //登录帐号 btnLogin.onclick=function(){ ajax("guestbook/index.php","get","m=index&a=login&username="+username2.value+"&password="+password2.value,function(data){ console.log(data); var jsondata = JSON.parse(data); if(jsondata.code===1){ alert(jsondata.message); }else{ alert(jsondata.message); user.style.display="block"; location.reload(); //userinfo.innerHTML=cookiename; } }) }
m=index&a=reg&username="+username1.value+"&password="+password1.value 注册get参数
m=index&a=login&username="+username2.value+"&password="+password2.value 登录get参数
code等于1代表未检测到您的信息
退出
//退出 logout.onclick=function(){ console.log(123); ajax("guestbook/index.php","get","m=index&a=logout",function(data){ var jsondata = JSON.parse(data) console.log(data); if(jsondata.code === 0){ alert("退出成功!"); location.reload(); }else{ } }) }
退出的get参数 m=index&a=logout
code=0退出成功
接下来就是如何前端获取cookie了
//前端获取cookie function getCookie(cookiename){ var strCookie = document.cookie; var arrCookie = strCookie.split(";"); for(var i = 1;i<arrCookie.length;i++){ var arr = arrCookie[i].split("="); if(arr[0]===cookiename){ return arr[1]; } } } var cookiename = getCookie(" username"); console.log(cookiename);
前端如何判断cookie是否存在了
//登录成功后显示 用户名退出栏 if(cookiename===undefined){ // userinfo.innerHTML=""; user.style.display="none"; }else{ userinfo.innerHTML=cookiename; }
cookiename就是username
但是聪明的你又发现了,过多的get请求会导致缓存严重,尤其在chrome下,缓存严重必须要Ctrl+F5了,
而且dom操作过多,导致了页面性能的降低
create database talklist create table `users` ( `uid` int(11) unsigned primary key auto_increment, `username` char(16) `password` char(32) key `username` (`username`) ) engine=myisam default charset=utf8;
通过这两次ajax的复习,对ajax的原理和使用有了深刻的认识,前后端交数据交互,ajax在其中发挥了巨大作用,PHP面向对象与JS面向对象的区别我也有了新的理解,上午还看了一个帖子,讲JS面向对象,一对比果然印象深刻,这次前后端的锻炼,让我收获颇丰,自己继续会撸起袖子加油干。
好了,晚安,期待下一次发贴。
再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销
标签:php get 返回值 字符 turn bre setcookie 自己的 查询