程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> php實戰第四天

php實戰第四天

編輯:關於PHP編程

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

 

 

 

\

\

 


1.今天學習到了 jquery的ajax,直接上代碼


[php]  / JavaScript Document  
$(document).ready(function(e) { 
    loadHiglight();//載入高亮特效  
 
 
    $("#submit").click(function() { //“留言”按鈕單擊事件  
        //獲取用戶名稱  
        var strUsetName = $("#userName").val(); 
        //獲取輸入留言內容  
        var strContent = $("#content").val(); 
        //獲取輸入郵箱  
        var strEmail = $("#email").val(); 
 
        //開始發送數據  
        $.ajax({ 
            url: 'index.php?m=index&a=add', 
            type: 'POST', 
            dataType: 'json', 
            data: { 
                userName: strUsetName, 
                content: strContent, 
                email: strEmail 
            }, 
            success: function(json, textStatus, xhr) { 
                if (json.state=='ok') { 
                    alert('操作提示,留言成功!');     
                    //alert();  
                    var data=json.data[0]; 
                    var strTag=createTag(data.userName,data.content,data.time); 
 
                    $(strTag).prependTo('div #liuyan'); 
 
                     //$("<b>Hello World!</b>").prependTo("p");  
                }else{ 
                    alert('操作提示,留言失敗!\n錯誤信息:'+json.error);   
                } 
            } 
        }) 
    }); 
    //動態載入留言  
    loadMore(); 
}); 
 
//監視滾動條滾動  
$(window).scroll(function() { 
    // 當滾動到最底部以上100像素時, 加載新內容  
    if ($(document).height() - $(this).scrollTop() - $(this).height() < 5) { 
        loadMore(); 
    }; 
}); 
 
 
 
fy = 0; 
function loadMore() { 
    fy++; 
    //alert(fy);  
    $.getJSON("index.php?m=index&a=data&page=" + fy + "&rand=" + Math.random(), function(json) { 
 
        for (var i = 0; i <= json.length - 1; i++) { 
            //alert(json[i]['userName']);  
            //content = '<div class="content"><div class="user"><span class="userName">' + json[i]['userName'] + '</span></div><div class="text">' + json[i]['content'] + '</div><div class="time">' + getLocalTime(json[i]['time']) + '</div></div>';  
            //content='<div class="content">'  
            //alert(content);  
            $("div #liuyan").append(createTag(json[i]['userName'],json[i]['content'],json[i]['time'])); 
            loadHiglight(); 
        }; 
 
    }); 

 
function loadHiglight() {//為了ajax後重載特效  
    $user = $("div .user"); 
    $text = $("div .text"); 
 
    $("div .content").each(function(index) { 
        $(this).mousemove(function() { 
 
            $user.eq(index).css("color", "#0A8CD2"); 
 
            //  $user.eq(index).css("background","#FFE6AD");  
            //  $text.eq(index).css("background","#FFFDF6");  
 
        }).mouseout(function() { 
 
            $user.eq(index).css("color", "#000"); 
 
            //  $user.eq(index).css("background","#E6F0F9");  
            //  $text.eq(index).css("background","#F8FBFD");  
        }); 
    }); 

function createTag(usetName, content, time) { 
    var strTag = '<div class="content"><div class="user"><span class="userName">' + usetName + '</span></div><div class="text">' + content + '</div><div class="time">' + getLocalTime(time) + '</div></div>'; 
    return strTag; 

function getLocalTime(nS) { 
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' '); 

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


 $("#submit").click(function() { //“留言”按鈕單擊事件
  //獲取用戶名稱
  var strUsetName = $("#userName").val();
  //獲取輸入留言內容
  var strContent = $("#content").val();
  //獲取輸入郵箱
  var strEmail = $("#email").val();

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

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

      //$("<b>Hello World!</b>").prependTo("p");
    }else{
     alert('操作提示,留言失敗!\n錯誤信息:'+json.error); 
    }
   }
  })
 });
 //動態載入留言
 loadMore();
});

//監視滾動條滾動
$(window).scroll(function() {
 // 當滾動到最底部以上100像素時, 加載新內容
 if ($(document).height() - $(this).scrollTop() - $(this).height() < 5) {
  loadMore();
 };
});

 

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

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

 });
}

function loadHiglight() {//為了ajax後重載特效
 $user = $("div .user");
 $text = $("div .text");

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

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

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

  }).mouseout(function() {

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

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


[php]  function data() 

    //引入分頁類  
    include "page.class.php"; 
        //得到data表的數據數量  
    $rows = $this->db->count('select * from data'); 
    //創建分頁對象  
    $page = new Page($rows, 5, ""); 
    $list=$this->db 
           ->order('id DESC') 
           //->table('data')  
           ->limit($page->getLimit()) 
           ->select(); 
    /*
    echo "<pre>";
    var_dump($list);
    echo "</pre>";
    */ 
    echo json_encode($list); 
    exit(); 

  function data()
  {
   //引入分頁類
   include "page.class.php";
    //得到data表的數據數量
   $rows = $this->db->count('select * from data');
   //創建分頁對象
   $page = new Page($rows, 5, "");
   $list=$this->db
       ->order('id DESC')
       //->table('data')
        ->limit($page->getLimit())
        ->select();
   /*
   echo "<pre>";
   var_dump($list);
   echo "</pre>";
   */
   echo json_encode($list);
   exit();
  }
這樣就實現了 瀑布流效果咯,有點缺點是 如果加載到 最後但是卻沒提示的噢,哈哈哈哈,

 

 

[php]  function add(){ 
            //添加後返回 影響條數,如果大於0就說明添加成功  
            $json['state']='no'; 
            if (empty($_POST['userName'])) { 
                $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 "添加成功";
                    //  echo "<script>location.reload()</script>";//防止刷新後的表單的重復提交
                    Header("HTTP/1.1 303 See Other");
                    Header("Location: ");   //轉向到根目錄
                    exit;
                    */ 
                    $json['state']='ok'; 
                    $json['data']=$this 
                                    ->db 
                                    ->table('data') 
                                    ->where('id='.$this->db->last_insert_id()) 
                                    ->select(); 
                }else { 
                     
                    $json['error']=$this->db->error(); 
                    //die($this->db->error());//添加失敗輸出錯誤信息  
                }    
            } 
            echo json_encode($json); 
            //var_dump($_POST);  
        } 

function add(){
   //添加後返回 影響條數,如果大於0就說明添加成功
   $json['state']='no';
   if (empty($_POST['userName'])) {
    $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 "添加成功";
     // echo "<script>location.reload()</script>";//防止刷新後的表單的重復提交
     Header("HTTP/1.1 303 See Other");
     Header("Location: ");   //轉向到根目錄
     exit;
     */
     $json['state']='ok';
     $json['data']=$this
         ->db
         ->table('data')
         ->where('id='.$this->db->last_insert_id())
         ->select();
    }else {
     
     $json['error']=$this->db->error();
     //die($this->db->error());//添加失敗輸出錯誤信息
    } 
   }
   echo json_encode($json);
   //var_dump($_POST);
  }這是留言部分的代碼,哈哈,這樣就可以留言後直接就在頁面看到效果,而不用刷新浏覽器囖,效果漂亮多了 jquery+ajax就是牛X.哈

 


2.今天學習到的php 函數

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

json_encode(); 說明string json_encode ( mixed $value [, int $options = 0 ] )返回 value 值的 JSON 形式empty() 如果值是空的話,返回真,有值就返回假,
time() 取得時間戳
mysql_insert_id() 返回上一次操作自增字段的id

3.今天學習到的 javascript函數,這函數用於轉換時間戳.

 

[javascript]  function getLocalTime(nS) { 
    return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' '); 

jquery的append()用於加載到標簽內最後面的HTML 
 
prependTo()加載HTML代碼到 標簽的最前面 

function getLocalTime(nS) {
 return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
}
jquery的append()用於加載到標簽內最後面的HTML

prependTo()加載HTML代碼到 標簽的最前面


4.今天得到的經驗ajax加載網頁標簽,後jquery特效會消失,所以在ajax加載網頁標簽後,要重新綁定 jquery的事件和函數。不然特效就沒咯。

 

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

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved