php实战第四天

好吧先上图,看看,这是 ajax的留言板噢.有瀑布流效果,哈

1.今天学习到了%20jquery的ajax,直接上代码

[php] %20/%20JavaScript%20Document  $(document).ready(function(e)%20{    %20loadHiglight();//载入高亮特效       %20$("#submit").click(function()%20{%20//“留言”按钮单击事件         %20//获取用户名称         %20var%20strUsetName%20=%20$("#userName").val();        %20//获取输入留言内容         %20var%20strContent%20=%20$("#content").val();        %20//获取输入邮箱         %20var%20strEmail%20=%20$("#email").val();         %20//开始发送数据         %20$.ajax({            %20url:%20'index.php?m=index&a=add',            %20type:%20'POST',            %20dataType:%20'json',            %20data:%20{                %20userName:%20strUsetName,                %20content:%20strContent,                %20email:%20strEmail            %20},            %20success:%20function(json,%20textStatus,%20xhr)%20{                %20if%20(json.state=='ok')%20{                    %20alert('操作提示，留言成功！');                        %20//alert();                     %20var%20data=json.data[0];                    %20var%20strTag=createTag(data.userName,data.content,data.time);                     %20$(strTag).prependTo('div%20#liuyan');                      %20//$("<b>Hello%20World!</b>").prependTo("p");                 %20}else{                    %20alert('操作提示，留言失败！/n错误信息:'+json.error);                  %20}            %20}        %20})    %20});    %20//动态载入留言     %20loadMore(); });  //监视滚动条滚动  $(window).scroll(function()%20{    %20//%20当滚动到最底部以上100像素时，%20加载新内容     %20if%20($(document).height()%20-%20$(this).scrollTop()%20-%20$(this).height()%20<%205)%20{        %20loadMore();    %20}; });    fy%20=%200; function%20loadMore()%20{    %20fy++;    %20//alert(fy);     %20$.getJSON("index.php?m=index&a=data&page="%20+%20fy%20+%20"&rand="%20+%20Math.random(),%20function(json)%20{         %20for%20(var%20i%20=%200;%20i%20<=%20json.length%20-%201;%20i++)%20{            %20//alert(json[i]['userName']);             %20//content%20=%20'<div%20class="content"><div%20class="user"><span%20class="userName">'%20+%20json[i]['userName']%20+%20'</span></div><div%20class="text">'%20+%20json[i]['content']%20+%20'</div><div%20class="time">'%20+%20getLocalTime(json[i]['time'])%20+%20'</div></div>';             %20//content='<div%20class="content">'             %20//alert(content);             %20$("div%20#liuyan").append(createTag(json[i]['userName'],json[i]['content'],json[i]['time']));            %20loadHiglight();        %20};     %20}); }  function%20loadHiglight()%20{//为了ajax后重载特效     %20$user%20=%20$("div%20.user");    %20$text%20=%20$("div%20.text");     %20$("div%20.content").each(function(index)%20{        %20$(this).mousemove(function()%20{             %20$user.eq(index).css("color",%20"#0A8CD2");             %20// %20$user.eq(index).css("background","#FFE6AD");             %20// %20$text.eq(index).css("background","#FFFDF6");          %20}).mouseout(function()%20{             %20$user.eq(index).css("color",%20"#000");             %20// %20$user.eq(index).css("background","#E6F0F9");             %20// %20$text.eq(index).css("background","#F8FBFD");         %20});    %20}); } function%20createTag(usetName,%20content,%20time)%20{    %20var%20strTag%20=%20'<div%20class="content"><div%20class="user"><span%20class="userName">'%20+%20usetName%20+%20'</span></div><div%20class="text">'%20+%20content%20+%20'</div><div%20class="time">'%20+%20getLocalTime(time)%20+%20'</div></div>';    %20return%20strTag; } function%20getLocalTime(nS)%20{    %20return%20new%20Date(parseInt(nS)%20*%201000).toLocaleString().replace(/:/d{1,2}$/,%20'%20'); } 

//%20JavaScript%20Document$(document).ready(function(e)%20{ loadHiglight();//载入高亮特效

 $("#submit").click(function()%20{%20//“留言”按钮单击事件  //获取用户名称  var%20strUsetName%20=%20$("#userName").val();  //获取输入留言内容  var%20strContent%20=%20$("#content").val();  //获取输入邮箱  var%20strEmail%20=%20$("#email").val();

  //开始发送数据  $.ajax({   url:%20'index.php?m=index&a=add',   type:%20'POST',   dataType:%20'json',   data:%20{    userName:%20strUsetName,    content:%20strContent,    email:%20strEmail   },   success:%20function(json,%20textStatus,%20xhr)%20{    if%20(json.state=='ok')%20{     alert('操作提示，留言成功！');      //alert();     var%20data=json.data[0];     var%20strTag=createTag(data.userName,data.content,data.time);

     $(strTag).prependTo('div%20#liuyan');

     %20//$("<b>Hello%20World!</b>").prependTo("p");    }else{     alert('操作提示，留言失败！/n错误信息:'+json.error);     }   }  }) }); //动态载入留言 loadMore();});

//监视滚动条滚动$(window).scroll(function()%20{ //%20当滚动到最底部以上100像素时，%20加载新内容 if%20($(document).height()%20-%20$(this).scrollTop()%20-%20$(this).height()%20<%205)%20{  loadMore(); };});

fy%20=%200;function%20loadMore()%20{ fy++; //alert(fy); $.getJSON("index.php?m=index&a=data&page="%20+%20fy%20+%20"&rand="%20+%20Math.random(),%20function(json)%20{

  for%20(var%20i%20=%200;%20i%20<=%20json.length%20-%201;%20i++)%20{   //alert(json[i]['userName']);   //content%20=%20'<div%20class="content"><div%20class="user"><span%20class="userName">'%20+%20json[i]['userName']%20+%20'</span></div><div%20class="text">'%20+%20json[i]['content']%20+%20'</div><div%20class="time">'%20+%20getLocalTime(json[i]['time'])%20+%20'</div></div>';   //content='<div%20class="content">'   //alert(content);   $("div%20#liuyan").append(createTag(json[i]['userName'],json[i]['content'],json[i]['time']));   loadHiglight();  };

 });}

function%20loadHiglight()%20{//为了ajax后重载特效 $user%20=%20$("div%20.user"); $text%20=%20$("div%20.text");

 $("div%20.content").each(function(index)%20{  $(this).mousemove(function()%20{

   $user.eq(index).css("color",%20"#0A8CD2");

   // $user.eq(index).css("background","#FFE6AD");   // $text.eq(index).css("background","#FFFDF6");

  }).mouseout(function()%20{

   $user.eq(index).css("color",%20"#000");

   // $user.eq(index).css("background","#E6F0F9");   // $text.eq(index).css("background","#F8FBFD");  }); });}function%20createTag(usetName,%20content,%20time)%20{ var%20strTag%20=%20'<div%20class="content"><div%20class="user"><span%20class="userName">'%20+%20usetName%20+%20'</span></div><div%20class="text">'%20+%20content%20+%20'</div><div%20class="time">'%20+%20getLocalTime(time)%20+%20'</div></div>'; return%20strTag;}function%20getLocalTime(nS)%20{ return%20new%20Date(parseInt(nS)%20*%201000).toLocaleString().replace(/:/d{1,2}$/,%20'%20');}请求的方法是

[php] %20function%20data() {    %20//引入分页类     %20include%20"page.class.php";        %20//得到data表的数据数量     %20$rows%20=%20$this->db->count('select%20*%20from%20data');    %20//创建分页对象     %20$page%20=%20new%20Page($rows,%205,%20"");    %20$list=$this->db           %20->order('id%20DESC')           %20//->table('data')            %20->limit($page->getLimit())           %20->select();    %20/*   %20echo%20"<pre>";   %20var_dump($list);   %20echo%20"</pre>";   %20*/    %20echo%20json_encode($list);    %20exit(); } 

  function%20data()  {   //引入分页类   include%20"page.class.php";    //得到data表的数据数量   $rows%20=%20$this->db->count('select%20*%20from%20data');   //创建分页对象   $page%20=%20new%20Page($rows,%205,%20"");   $list=$this->db      %20->order('id%20DESC')      %20//->table('data')   %20   %20->limit($page->getLimit())   %20   %20->select();   /*   echo%20"<pre>";   var_dump($list);   echo%20"</pre>";   */   echo%20json_encode($list);   exit();  }这样就实现了%20瀑布流效果咯,有点缺点是%20如果加载到%20最后但是却没提示的噢,哈哈哈哈,

[php] %20function%20add(){            %20//添加后返回%20影响条数,如果大于0就说明添加成功             %20$json['state']='no';            %20if%20(empty($_POST['userName']))%20{                %20$json['error']='没有输入用户名';             %20}elseif(empty($_POST['content'])){                %20$json['error']='没有输入留言内容';             %20}elseif(empty($_POST['email'])){                %20$json['error']='没有输入邮箱';             %20}else{                %20isset($_POST['content'])?$_POST['content']=nl2br($_POST['content']):"";                %20$_POST['time']=time();                %20if($this->db->data($_POST)->add()>0){                    %20/*                   %20echo%20"添加成功";                   %20// %20echo%20"<script>location.reload()</script>";//防止刷新后的表单的重复提交                   %20Header("HTTP/1.1%20303%20See%20Other");                   %20Header("Location:%20");  %20//转向到根目录                   %20exit;                   %20*/                    %20$json['state']='ok';                    %20$json['data']=$this                                    %20->db                                    %20->table('data')                                    %20->where('id='.$this->db->last_insert_id())                                    %20->select();                %20}else%20{                                         %20$json['error']=$this->db->error();                    %20//die($this->db->error());//添加失败输出错误信息                 %20}               %20}            %20echo%20json_encode($json);            %20//var_dump($_POST);         %20} 

function%20add(){   //添加后返回%20影响条数,如果大于0就说明添加成功   $json['state']='no';   if%20(empty($_POST['userName']))%20{    $json['error']='没有输入用户名';

   }elseif(empty($_POST['content'])){    $json['error']='没有输入留言内容';

   }elseif(empty($_POST['email'])){    $json['error']='没有输入邮箱';

   }else{    isset($_POST['content'])?$_POST['content']=nl2br($_POST['content']):"";    $_POST['time']=time();    if($this->db->data($_POST)->add()>0){     /*     echo%20"添加成功";     // echo%20"<script>location.reload()</script>";//防止刷新后的表单的重复提交     Header("HTTP/1.1%20303%20See%20Other");     Header("Location:%20");  %20//转向到根目录     exit;     */     $json['state']='ok';     $json['data']=$this         ->db         ->table('data')         ->where('id='.$this->db->last_insert_id())         ->select();    }else%20{          $json['error']=$this->db->error();     //die($this->db->error());//添加失败输出错误信息    }    }   echo%20json_encode($json);   //var_dump($_POST);  }这是留言部分的代码,哈哈,这样就可以留言后直接就在页面看到效果,而不用刷新浏览器,效果漂亮多了%20jquery+ajax就是牛X.哈

2.今天学习到的php%20函数

[php] %20json_encode();<H3%20style="BORDER-BOTTOM:%20rgb(255,255,255)%201px%20dashed;%20BACKGROUND-COLOR:%20transparent;%20MARGIN-TOP:%200px;%20FONT-FAMILY:%20verdana,%20arial,%20helvetica,%20sans-serif;%20COLOR:%20rgb(0,0,102);%20FONT-SIZE:%2015px;%20PADDING-TOP:%200px"%20class=title>%20说明</H3><DIV%20style="BORDER-BOTTOM:%20black%201px%20solid;%20BORDER-LEFT:%20black%201px%20solid;%20PADDING-BOTTOM:%200.5em;%20PADDING-LEFT:%200.5em;%20PADDING-RIGHT:%200.5em;%20FONT-FAMILY:%20verdana,%20arial,%20helvetica,%20sans-serif;%20FONT-SIZE:%2014px;%20BORDER-TOP:%20black%201px%20solid;%20BORDER-RIGHT:%20black%201px%20solid;%20PADDING-TOP:%200.5em"%20class="methodsynopsis%20dc-description"%20sizcache="0"%20sizset="26"><SPAN%20class=type>string</SPAN>%20<SPAN%20class=methodname><STRONG>json_encode</STRONG></SPAN>%20(%20<SPAN%20class=methodparam%20sizcache="0"%20sizset="26"><SPAN%20class=type%20sizcache="0"%20sizset="26"><A%20style="BORDER-BOTTOM:%20rgb(0,0,153)%201px%20solid;%20BACKGROUND-COLOR:%20transparent;%20COLOR:%20rgb(0,0,153);%20TEXT-DECORATION:%20none"%20class="type%20mixed"%20href="http://cn2.php.net/manual/zh/language.pseudo-types.php#language.types.mixed">mixed</A></SPAN>%20<CODE%20style="FONT-STYLE:%20italic;%20FONT-FAMILY:%20Consolas,%20'Andale%20Mono%20WT',%20'Andale%20Mono',%20'Lucida%20Console',%20Monaco,%20'Courier%20New',%20Courier,%20monospace"%20class=parameter>$value</CODE></SPAN>%20[,%20<SPAN%20class=methodparam><SPAN%20class=type>int</SPAN>%20<CODE%20style="FONT-STYLE:%20italic;%20FONT-FAMILY:%20Consolas,%20'Andale%20Mono%20WT',%20'Andale%20Mono',%20'Lucida%20Console',%20Monaco,%20'Courier%20New',%20Courier,%20monospace"%20class=parameter>$options</CODE><SPAN%20style="FONT-STYLE:%20italic"%20class=initializer>%20=%200</SPAN></SPAN>%20]%20)</DIV><P%20style="FONT-FAMILY:%20verdana,%20arial,%20helvetica,%20sans-serif;%20FONT-SIZE:%2014px"%20class="para%20rdfs-comment">返回%20<STRONG><CODE%20style="FONT-FAMILY:%20Consolas,%20'Andale%20Mono%20WT',%20'Andale%20Mono',%20'Lucida%20Console',%20Monaco,%20'Courier%20New',%20Courier,%20monospace"%20class=parameter>value</CODE></STRONG>%20值的%20JSON%20形式</P><P%20style="FONT-FAMILY:%20verdana,%20arial,%20helvetica,%20sans-serif;%20FONT-SIZE:%2014px"%20class="para%20rdfs-comment">empty()%20如果值是空的话,返回真,有值就返回假, </P><P%20style="FONT-FAMILY:%20verdana,%20arial,%20helvetica,%20sans-serif;%20FONT-SIZE:%2014px"%20class="para%20rdfs-comment">time()%20取得时间戳 </P><P%20style="FONT-FAMILY:%20verdana,%20arial,%20helvetica,%20sans-serif;%20FONT-SIZE:%2014px"%20class="para%20rdfs-comment">mysql_insert_id()%20返回上一次操作自增字段的id </P> 

json_encode();%20说明string%20json_encode%20(%20mixed%20$value%20[,%20int%20$options%20=%200%20]%20)返回%20value%20值的%20JSON%20形式empty()%20如果值是空的话,返回真,有值就返回假,time()%20取得时间戳mysql_insert_id()%20返回上一次操作自增字段的id

3.今天学习到的%20javascript函数,这函数用于转换时间戳.

[javascript] %20function%20getLocalTime(nS)%20{    %20return%20new%20Date(parseInt(nS)%20*%201000).toLocaleString().replace(/:/d{1,2}$/,%20'%20'); } jquery的append（）用于加载到标签内最后面的HTML  prependTo（）加载HTML代码到%20标签的最前面 

function%20getLocalTime(nS)%20{ return%20new%20Date(parseInt(nS)%20*%201000).toLocaleString().replace(/:/d{1,2}$/,%20'%20');}jquery的append（）用于加载到标签内最后面的HTML

prependTo（）加载HTML代码到%20标签的最前面

4.今天得到的经验ajax加载网页标签，后jquery特效会消失，所以在ajax加载网页标签后，要重新绑定%20jquery的事件和函数。不然特效就没咯。

[javascript] %20<PRE%20class=javascript%20name="code"%20sizcache="1"%20sizset="7"><PRE%20class=javascript%20name="code"></PRE> <PRE></PRE> <PRE></PRE>  </PRE>