php实战第四天

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

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

// 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}$/, ' ');
}

请求的方法是

		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 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 函数 

json_encode();
 说明
  
  

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

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

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

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

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