지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > php教程 > php手册 > 본문

php实战第四天

WBOY
풀어 주다： 2016-06-13 10:57:10
원래의
34051명이 탐색했습니다.

好吧先上图,看看,这是 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'); 
 
                     //$("Hello World!").prependTo("p");  
                }else{ 
                    alert('操作提示，留言失败！\n错误信息:'+json.error);   
                } 
            } 
        }) 
    }); 
    //动态载入留言  
    loadMore(); 
}); 
 
//监视滚动条滚动  
$(window).scroll(function() { 
    // 当滚动到最底部以上100像素时， 加载新内容  
    if ($(document).height() - $(this).scrollTop() - $(this).height()         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             //alert(json[i]['userName']);  
            //content = '

' + json[i]['userName'] + '
' + json[i]['content'] + '
' + getLocalTime(json[i]['time']) + '
';  
            //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 = '
' + usetName + '
' + content + '
' + getLocalTime(time) + '
'; 
    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');

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

//监视滚动条滚动
$(window).scroll(function() {
 // 当滚动到最底部以上100像素时， 加载新内容
 if ($(document).height() - $(this).scrollTop() - $(this).height()   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    //alert(json[i]['userName']);
   //content = '

' + json[i]['userName'] + '
' + json[i]['content'] + '
' + getLocalTime(json[i]['time']) + '
';
   //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 = '

' + usetName + '
' + content + '
' + getLocalTime(time) + '
';
 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 "

";<br>
    var_dump($list);<br>
    echo "
로그인 후 복사
";
    */ 
    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 "

";<br>
   var_dump($list);<br>
   echo "
로그인 후 복사
";
   */
   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();

说明

string json_encode ( mixed $value [, int $options = 0 ] )

返回 value 值的 JSON 形式

empty() 如果值是空的话,返回真,有值就返回假, 

time() 取得时间戳 

mysql_insert_id() 返回上一次操作自增字段的id 

 

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">
로그인 후 복사
 
로그인 후 복사
로그인 후 복사
 


로그인 후 복사
로그인 후 복사
 

 

 
						



                

            

            

                                

                    관련 라벨：
                    

                        ajax php 하아 学习 实战 效果 가지다 흐름 留言板 ~의                    

                

                                
원천：php.cn

                            

            

                                    
                        이전 기사：比较完善的php取字符函数
                    
                                    
                        다음 기사：php实战第十一天
                    
                            

            

       
                
본 웹사이트의 성명

                
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

            

           

            

                
저자별 최신 기사

                
            

            

                
최신 이슈

                

                                        

                        

                            URL 매개변수에서 얻은 PHP 배열이 예상대로 작동하지 않습니다.
                            카테고리 ID가 포함된 URL 매개변수가 있고 이를 다음과 같은 배열로 처리하려고 합니다. http://example.com?cat[]=3,9,13 PHP에서는 ...
                            

                                

                                     에서 2024-04-06 22:09:02
                                

                                

                                    
  0 

                                    
1

                                    
1428

                                

                            

                        

                    

                    

                                        

                        

                            Apache에서 CustomLog 지시문을 어디에 배치해야 합니까?
                            저는 php:7.2-apachedocker를 사용하고 있습니다. 상태 확인 URL 로그인 액세스 로그를 비활성화해야 합니다. 이 링크를 기반으로 Customlog...
                            

                                

                                     에서 2024-04-06 22:03:59
                                

                                

                                    
  0 

                                    
1

                                    
990

                                

                            

                        

                    

                    

                                        

                        

                            반환 값의 변수 형식은 무엇입니까?
                            저는 PHP를 처음 배우는 사람입니다. 코드 조각을 찾았습니다: if($x<time()){return[false,'error'];} 논리나 변수는 중요하지 ...
                            

                                

                                     에서 2024-04-06 21:55:20
                                

                                

                                    
  0 

                                    
1

                                    
778

                                

                            

                        

                    

                    

                                        

                        

                            opentbs를 사용하여 odt 파일을 생성할 때 발생하는 문제: 동일한 키의 값이 별도의 열이 아닌 동일한 행에 표시됩니다.
                            PHP를 사용하여 odt를 만들기 위해 OpenTbs라는 라이브러리를 사용하고 있는데, 열과 행이 동적으로 생성되기 때문에 사용하고 있습니다. 행과 열을 만드는 ...
                            

                                

                                     에서 2024-04-06 20:18:18
                                

                                

                                    
  0 

                                    
1

                                    
483

                                

                            

                        

                    

                    

                                        

                        

                            루프 오버를 위해 ID별로 MySQL 결과 그룹화
                            mysql에 비행 데이터가 포함된 테이블이 있습니다. codeigniter3 travel_idair_idFlightDurationout_or_inflightdur...
                            

                                

                                     에서 2024-04-06 17:27:56
                                

                                

                                    
  0 

                                    
1

                                    
406

                                

                            

                        

                    

                    

                                    

            

            

                

                    
관련 주제

                    더>
                    
                

                

                    
                

            

        

    

    

        

            
인기 추천

            

                
    
                                    

            

        

        
        

            

                
인기 튜토리얼

                더>
                
            

            

                

                    
관련 튜토리얼 

                    
인기 추천

                    
최신 강좌

                

                
                
                
            

            
        


        

            

                
최신 다운로드

                더>
                
            

                        
            

                

                    
웹 효과 

                    
웹사이트 소스 코드

                    
웹사이트 자료

                    
프론트엔드 템플릿