好吧先上圖,看看,這是 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>