内 容 | 本周学习知识点: 1. MVC框架 2. Javascript基础 3. DOM、事件 4. Ajax |
学习总结: 1. MVC框架 MVC解释 M-------处理数据库的模型 V-------VIEW显示数据 C-------Controller -----控制器 增加安全性 defined('APP_NAME') || die('非法操作');
Init.php初始化文件: <?php define('ROOT_PATH',str_replace('init.php','',str_replace('\\','/',__FILE__))) ; include 'configs/config.php';//加载配置文件 //获取地址栏传递的参数 c控制器 a动作 if(isset($_REQUEST['c'])){ //传递值 $controller=new $_REQUEST['c'].'Controller'; }else{ //默认值 if(APP_NAME=='home'){ //home前台controller $controller=new homeController(); }elseif(APP_NAME=='admin'){ //admin后台controller $controller=new adminController(); } } if(isset($_REQUEST['a'])){ //传递值 $action = $REUQEST['a'].'Action'; }else{ //默认值 if(APP_NAME=='home'){ //home前台 action $action = 'homeAction'; }elseif(APP_NAME=='admin'){ //admin后台 action $action ='adminAction'; } } $controller->$action(); //自动加载 function __autoload($classname){ if(strpos($classname,'Controller')!==false){ if($classname=='baseController'){ //加载基类 include 'controllers/baseController.class.php'; }else{ include 'controllers/'.APP_NAME.'/'.$classname.'.class.php'; } }elseif(strpos($classname,'Model')!==false){ include 'models/'.$classname.'.class.php'; }elseif($classname=='Smarty'){ include 'plugins/Smarty/Smarty.class.php'; }elseif(strpos($classname,'Helper')!==false){ include 'helpers/'.$classname.'.class.php'; } }
baseController.class.php <?php class baseController{ protected $smarty; public function __construct (){ $this->initSmarty();
} public function initSmarty(){ //include ROOT_PATH.'plugins/smarty/Smarty.class.php'; $this->smarty=new Smarty(); $this->smarty ->template_dir='views/'.APP_NAME; $this->smarty ->compile_dir='./data'; $this->smarty->left_delimiter='<{'; $this->smarty->right_dilimiter='}>'; } }
goodsController.class.php <?php defined('APP_NAME') || die('非法操作'); include ROOT_PATH.'controllers/baseController.class.php'; class goodsController extends baseController{ public function addAction(){ $this->add(); $this->display('test.tpl'); } public function selectAction(){ include ROOT_PATH.'models/goodsModel.class.php'; $model=new goodsModel(); $url=$model->getUrl(); $this->smarty->assign('name',$url); $this->smarty->display('test.tpl'); } }
baseModel.class.php <?php defined('APP_NAME') || die('非法操作'); class baseModel{ private $hostname; private $dbname; private $username; private $password; private $source;
public function __construct(){ global $config; $this->hostname = $config['db']['host'] ; $this->dbname = $config['db']['dbname'] ; $this->username = $config['db']['user'] ; $this->password = $config['db']['pass'] ; $this->connect(); }
public function connect(){ $this->source = mysql_connect($this->hostname,$this->username,$this->password); mysql_select_db($this->dbname); mysql_query("set names utf8"); } //查询一条记录的方法 public function getRow($sql){ $result = mysql_query($sql); $row = mysql_fetch_assoc($result); if($row){ return $row; }else{ return false; } } //查询一个字段的方法 public function getOne($sql){ $result = mysql_query($sql); $row = mysql_fetch_array($result); if($row){ return $row[0]; }else{ return false; } }
//查询所有数据的方法 public function getAll($sql){ $result = mysql_query($sql); $rows = array(); while($all = mysql_fetch_assoc($result)){ $rows[] = $all; } if($rows){ return $rows; }else{ return null; } } //封装更新、删除、插入的语句(dml语句),不需要获得数据库的值 public function query($sql){ $result = mysql_query($sql); if($result){ return true; }else{ return false; } } public function __destruct(){ mysql_close($this->source); } } 2.Javascript基础 javascript 的数据类型: 原始的数据类型(基本的数据类型): Undefined、null、boolean、number、string: 引用数据类型(对象数据类型): array:数组、object:对象、function:函数 1. undefined: 如果声明了一个变量,但是没有初始化值,这个时候这个变量保存的就是一个undefied,一个未定义的变量就是undefined 如果一个变量的值是undefined,那么这个变量的类型就是 undefined类型,undefined 这种类型只有一个值就是 undefined
2. null: 未定义的一个对象(最初设计的一个失误)----->
undefined 和 null 区别: 未定义的变量 就是 undefined 未定义的对象(还不存在的对象)----->null 3. bool true false 4. string 5. number : 整型数字、浮点型的数字 <script> var names=['王X','李X','代X']; var random=Math.round(Math.random()*(names.length-1));//内置对象Math alert(names[random]); </script> //数组对象 <script> var arr=['xiaoliang','xiaobai']; var arr2=new Array('xiaohua','xiaodai'); //关联数组 var arr3=new Array(); arr3['name']= 'xiaoyang'; arr3['age']='21'; for(var i=0; i<arr.length;i++){ //alert(arr[i]); } //关联数组遍历 for(var i in arr3){ alert(arr3[i]); } </script>
json ------> javascript object notation : javascript 对象表示法 var arr2={‘name’:’xiaohei’}; //日期 对象Date <script> function getDate(){ var myDate=new Date(); var year=myDate.getFullYear(); var month=myDate.getMonth()+1; var day=myDate.getDate(); var hour=myDate.getHours(); var minute=myDate.getMinutes(); var second=myDate.getSeconds(); document.getElementById('p1').innerHTML=year+'年'+month+'月'+day+'日'+hour+'时'+minute+'分'+second+'秒'; } setInterval('getDate()',1000);// 间隔,每隔几秒就掉一用一次函数 无限的执行 时间参数 1000微妙=1秒 </script> <p id="p1"></p> 3. DOM、事件 DOM: Document Object Model --------> 文档对象模型: 把HTML网页看作是一个文档,把html文档,转换成javascript可以操作的对象 通过DOM把htmnl文档里面不同的元素,造出不同的javascript的对象 创建元素对象: createElement
删除元素对象: 父元素.removeChild()
修改元素内容: innerHTML 设置元素的内容----------> <p></p> <div></div> setAttribute() <img> <a> <input> 查询元素对象: 1.document.getElementById(‘id值’) 网页换肤 2.document.getElementsByName(“元素名称”) 一般情况下,我们用于表单,(考虑到浏览器的兼容性),只对有默认name属性的表单元素有作用 3.document.getElementsByTagName(“标签名”) 隔行换色
事件: 一般事件: onload onfocus onblur onchange 鼠标事件: onclick onmouseover onmouseout onmousemove: 屏幕 event screenX screenY 客户端clientX clienY 键盘事件: onkeydown: event.keyCode event内建对象 keyCode对应的键值 onkeyup
setInterval() 间隔,每隔几秒就掉一用一次函数 无限的执行 setTimeout() 多少秒之后触发一次这个函数 每次执行一次
DOM的增删改查: 1. 增加DOM节点 createElement() 创建一个元素,参数就是元素名 1. 可以给这个元素创建文本 (div,p) createTextNode() var text=document.createTextNode('我的段落'); 2. 设置属性(input, img,a) setAttribute() 设置属性,实现效果 img.setAttribute('src','1.jpg'); img.setAttribute('width','100'); img.setAttribute('height','200'); 3. 将创建的这个元素,给他一个组织(归属) 通过父节点(父元素)追加他为子元素 p.appendChild(text); div.appendChild(p); div.appendChild(input); div.appendChild(img);
<script> var div=document.getElementById("skin"); var p=document.createElement('p'); var input =document.createElement('input'); input.setAttribute('type','button'); input.setAttribute('value','按钮'); var text=document.createTextNode('我的段落'); var img=document.createElement('img'); img.setAttribute('src','1.jpg'); img.setAttribute('width','100'); img.setAttribute('height','200'); p.appendChild(text); div.appendChild(p); div.appendChild(input); div.appendChild(img); </script> 隔行换色: function changeColor(){ var trs=document.getElementsByTagName("tr"); for(var i=0;i<trs.length;i++){ if(i%2==0){ //trs[i].style.backgroundColor='red'; trs[i].οnmοuseοver=function(){ this.style.backgroundColor='red'; } trs[i].οnmοuseοut=function(){ this.style.backgroundColor=''; } }else{ //trs[i].style.backgroundColor='green'; trs[i].οnmοuseοver=function(){ this.style.backgroundColor='green'; } trs[i].οnmοuseοut=function(){ this.style.backgroundColor=''; } } } }
统计文本域输入文字字数: <textarea id="text" cols="30" maxlength="5" rows="6" οnkeyup="count()"></textarea> <p id="p1"></p> <script> function count(){ var text =document.getElementById("text"); document.getElementById('p1').innerHTML='您已输入'+text.value.length+'个文字'; } </script> 鼠标移动事件: <divstyle="width:300px;height:300px;background-color:red" mouseover="changeWhite()" οnmοuseοut="changeGreen()"></div> <script> var div=document.getElementsByTagName("div"); function changeWhite(){ div[0].style.backgroundColor='white'; } function changeGreen(){ div[0].style.backgroundColor='green'; } </script>
4.Ajax aschronomos javascript and XML,异步通信技术 ajax,其实就是javascript 通过自己的一个对象,和服务器进行交互的一种技术
javascript的那个对象 不同的浏览器获得的方式 获得的方式不一样: 如果浏览器是火狐一伙的,使用 XMLHttpRequest()这个函数获得 如果浏览器是IE一伙的,使用 new ActiveXObject(“Microsoft.XMLHTTP”) 如果以get方式请求的话,如果表单的内容没有发生变化,并没有真的发送请求,而是读取的是缓存的内容,解决问题: get请求的时候,给地址栏一个随机数,表示请求的不再是原来的地址,类似于 验证码 var url = "index.php?c=user&a=validate&user="+username+"&time="+new Date(); 特别注意:如果以post方式提交的话,下面这句话必须要写 myxhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');
<?php class userController extends baseController{ public function listAction(){ $this->smarty->display('user/check.tpl'); } public function validateAction(){ //echo 'hello'; $name = $_GET['user']; //命令模型层查询数据 $model = new userModel(); $result = $model -> getByName($name); //命令视图层显示数据 //$this->smarty->assign('res',$result); if($result==1){ echo "<font color='red'>用户名已存在</font>"; }else{ echo "<font color='green'>用户名不存在</font>"; }
//$this->smarty->display('user/check.tpl'); } public function formAction(){ $this->smarty->display('user/form.tpl'); } public function checkAction(){ $name=$_POST['user']; $model = new userModel(); $result = $model -> getByName($name); if($result==1){ echo "<font color='red'>用户名已存在</font>"; }else{ echo "<font color='green'>用户名不存在</font>"; } } } <?php class userModel extends baseModel{ public function getByName($name){ $sql = "select * from user where username='$name'"; return $this->getOne($sql); } } 用户名:<input type='text' name='username' id="username"/> <input type='button' value="验证" οnclick="check()"/><span id='span'></span>
<script>
function getXHR(){ if(window.ActiveXObject){ var xhr=new ActiveXObject("Microsoft.XMLHTTP"); }else{ var xhr=new XMLHttpRequest(); } return xhr; } functioncheck(){ //通过xhr这个对象访问服务器 var xhr=getXHR(); var username=document.getElementById("username").value; //alert(xhr); var url="index.php?c=user&a=validate&user="+username+"&time="+new Date(); xhr.open("GET",url,true); //如果用POST方式usename得写send里边 xhr.send(null);//get方式 xhr.onreadystatechange = function(){ //只需要关注请求成功的这个状态 if(xhr.readyState==4){ //获得php返回的结果 /* alert(xhr.responseText); if(xhr.responseText==1){ alert('用户名已存在'); }else{ alert('用户名不存在'); } */
document.getElementById("span").innerHTML = xhr.responseText; } } } </script>
作用域:<script> /*函数的作用域链: 1.函数的作用域链,从最低级向上一级查找的过程 */ var v='global'; function f(){ //alert(v); } f(); /*2.如果函数范围内,声明了一个变量,就会使用局部范围的,就不再向上一级查找, 但是由于javascript的代码是从上往下执行的,所以执行到alert(v) 还没有给v这个变量赋值,所以输出undefined */ var v = 'global'; function f1(){ alert(v);//undefined var v = 'function'; //alert(v);//function } f1(); </script>
通过这个对象的方法去请求php文件:,请求的话,至少需要知道 请求的地址,以及请求的方式: 1. open() 相当于打开一个浏览器,输入地址 第一个参数,请求的方式: 第二个参数,请求的地址: 第三个参数,布尔值, true false true: 异步请求: javascript 请求服务器、服务器查询,javascript继续执行,查询之后把结果给javascript 即可 false:非异步请求,速度慢 xhr.open("GET",url,true);
2. 发送数据: xhr.send() 如果以get方式发送,需要在地址栏传递参数: send()的参数为空 |
javascript、ajax基础
最新推荐文章于 2023-04-10 10:17:36 发布