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);
  }这是留言部分的代码,哈哈,这样就可以留言后直接就在页面看到效果,而不用刷新浏览器