您的位置：首页 > 编程语言 > PHP开发

PHP记事（5）- 关于comment

2011-01-19 10:49 337 查看
查看index.php输出的html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Microblog</title>
<meta content="phpsay,microblog" name="keywords" />
<meta content="" name="description" />
<link rel="alternate" type="application/rss+xml" href="rss.php" mce_href="rss.php" title="Microblog" />
<link rel="stylesheet" type="text/css" href="_static/default/style.css" mce_href="_static/default/style.css" />
<mce:script type="text/javascript" src="_static/js/jquery.js" mce_src="_static/js/jquery.js"></mce:script>
<mce:script type="text/javascript" src="_static/js/form.js" mce_src="_static/js/form.js"></mce:script>
<mce:script type="text/javascript" src="_static/js/action.js" mce_src="_static/js/action.js"></mce:script>
<mce:script type="text/javascript" src="_static/js/zoomi.js" mce_src="_static/js/zoomi.js"></mce:script>
</head>
<body>
<div id="navbar"><a href="./login.php" mce_href="login.php">登录</a></div>
<div class="wrapper">
<div id="header">

<img src="_static/avatar/avatar.jpg" mce_src="_static/avatar/avatar.jpg" alt="phpsay" id="avatar" />
<h1><a href="./" mce_href="./">Microblog</a><span><a href="./" mce_href="./">http://localhost/blog</a></span></h1>
<ul id="menu">
<li><a href="./" mce_href="./">微博</a></li>
<li><a href="./follow.php" mce_href="follow.php">关注</a></li>
<li><a href="./follow.php?t=fans" mce_href="follow.php?t=fans">粉丝</a></li>
</ul>

</div>

<div id="description">
<span class="left"></span>
<span class="right"><a href="./rss.php" mce_href="rss.php" title="RSS订阅" target="_blank"></a></span>
</div>
<div id="main">

<div class="entry first">

<div class="content">///</div>
<div class="from">
<span class="mycome">2010年12月31日 15:16 from Web</span>
<span class="option">
<span class="reply" onclick="loadComments(5)">评论
<span id="reply_5">(0)</span>
</span>
</span>
</div>
<div class="clear"></div>
</div>

<div class="comment" id="comment_5"></div>

<div class="entry">

<div class="content">分享图片ttt<a id="zoom" href="#" mce_href="#" title="点击关闭"><img src="_static/picture/2010/12/31/s_151533_24087.jpg" mce_src="_static/picture/2010/12/31/s_151533_24087.jpg" alt=					"_static/picture/2010/12/31/b_151533_24087.jpg" title="查看大图"></a></div>
<div class="from">
<span class="mycome">2010年12月31日 15:15 from Web</span>
<span class="option">
<span class="reply" onclick="loadComments(4)">评论
<span id="reply_4">(1)</span>
</span>
</span>
</div>
<div class="clear"></div>
</div>

<div class="comment" id="comment_4"></div>

<div class="entry"><div class="content">d - Digits (0-9)D - Any non digit character. - (Period) – Any character except newline</div><div class="from"><span class="mycome">2010年12月31日 15:14 from Web</span><span class="option"><span class="reply" onclick="loadComments(3)">评论<span id="reply_3">(1)</span></span></span></div><div class="clear"></div> </div><div class="comment" id="comment_3"></div><div class="entry"><div class="content">W - Any non “word” characters - Whitespace (space, tab CRLF)S - Any non whitepsace character</div><div class="from"><span class="mycome">2010年12月31日 15:14 from Web</span><span class="option"><span class="reply" onclick="loadComments(2)">评论<span id="reply_2">(0)</span></span></span></div><div class="clear"></div> </div><div class="comment" id="comment_2"></div><div class="entry"><div class="content">PHP REGEX CHEAT SHEET Special Sequences /w - Any “word” character (a-z 0-9 _)</div><div class="from"><span class="mycome">2010年12月31日 15:13 from Web</span><span class="option"><span class="reply" onclick="loadComments(1)">评论<span id="reply_1">(0)</span></span></span></div><div class="clear"></div> </div><div class="comment" id="comment_1"></div>

<div class="pages"><em>共 5 篇</em></div>
<div id="stat">数据统计：24小时内发布<strong>0</strong>篇 ... 一周内发布<strong>0</strong>篇 ... 总发布数<strong>5</strong></div>

</div>
</div>
<div id="footer"><span>© 2006～2010 PHPSay.com</span>Powered by <a href="http://www.phpsay.com/" mce_href="http://www.phpsay.com/" target="_blank">PHPSay-Microblog</a> 1.2 ,Theme By Hoofei<mce:script type="text/javascript"><!--
$.get('./friend_server.php?do=update');
// --></mce:script></div></body></html>


比较打开comment与不打开comment时的html源码，两者完全相同，blog entry的代码片段都为：

<div class="entry first">
<div class="content">///</div>
<div class="from">
<span class="mycome">2010年12月31日 15:16 from Web</span>
<span class="option">
<span class="reply" onclick="loadComments(5)">评论
<span id="reply_5">(0)</span>
</span>
</span>
</div>
<div class="clear"></div>
</div>
<div class="comment" id="comment_5"></div>

<div class="entry">
<div class="content">分享图片ttt<a id="zoom" href="#" mce_href="#" title="点击关闭"><img src="_static/picture/2010/12/31/s_151533_24087.jpg" mce_src="_static/picture/2010/12/31/s_151533_24087.jpg" alt="_static/picture/2010/12/31/b_151533_24087.jpg" title="查看大图"></a></div>
<div class="from">
<span class="mycome">2010年12月31日 15:15 from Web</span>
<span class="option">
<span class="reply" onclick="loadComments(4)">评论
<span id="reply_4">(1)</span>
</span>
</span>
</div>
<div class="clear"></div>
</div>


在Chrome里通过“检查元素”功能可以看到其实comment的代码片段应该为：

<div class="comment" id="comment_4" style="display: block; " mce_style="display: block; ">
the cached file is effective
<ul>
<li id="comment_list_1">
<p>nice work!</p>
<span class="from">2010年12月31日 15:20 <i>by</i> <u>good</u></span>
</li>
</ul>
<div id="comment_div_4">
<form id="comment_form_4">
<input type="text" name="nickname" id="input_nickname_4" class="short" maxlength="10" onkeydown="if(event.keyCode==13){return false;}">:
<input type="text" name="comment" id="input_message_4" class="long" maxlength="70" onkeydown="if(event.keyCode==13){commentDo(4)}">
<input type="hidden" name="mid" value="4">
<input type="submit" class="submit" id="input_submit_4" value="" onclick="commentDo(4)">
</form>

</div>
</div>


在index.htnl中有如下片段：

onclick="loadComments(5)"


此为JavaScript函数，通过查找，在_cache/js/action.js文件中。有函数定义：

function loadComments(id)
{
var obj = $("#comment_"+id);
if( obj.css('display') == "none" )
{
obj.html("<div class='load'><img src="./_static/images/loading.gif" mce_src="_static/images/loading.gif"></div>");
obj.slideDown("fast",function(){$.post('./comment.php', {id:id,pg:1},function(m){obj.html(m);});});
}
else
{
obj.slideUp("fast",function(){obj.html("");});
}
}


在Google中search$.post，发现它是JQuery函数，对comment.php发送请求，以post形式传送id与pg两个参数。然后调用function作为回调函数，它将obj的内容设定为返回的html片段。该请求将返回什么样的html片段？另外做一个实验文件postForm.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>postForm</title>
</head>
<body>
<form action="http://localhost/blog/comment.php" method="post" name="comment_form_4" target="_blank" id="comment_form_4" >
<input type="text" name="nickname" id="input_nickname_4" maxlength="10">:
<input type="hidden" name="id" value="4">
<input type="hidden" name="pg" value="1">
<input name="submit" type="submit" id="input_submit_4" value="sub">
</form>
</body>
</html>


执行表单提交，得到的html代码为：

<html>
<head></head>
<body>
the cached file is effective
<ul>
<li id="comment_list_1">
<p>nice work!</p>
<span class="from">2010年12月31日 15:20 <i>by</i> <u>good</u></span>
</li>
</ul>

<div id="comment_div_4">
<form id="comment_form_4">
<input type="text" name="nickname" id="input_nickname_4" class="short" maxlength="10" onKeyDown="if(event.keyCode==13){return false;}">:
<input type="text" name="comment" id="input_message_4" class="long" maxlength="70" onKeyDown="if(event.keyCode==13){commentDo(4)}">
<input type="hidden" name="mid" value="4">
<input type="submit" class="submit" id="input_submit_4" value="" onClick="commentDo(4)">
</form>
</div>
</body>
</html>


从模板html文件，到经过模板类编译生成最终的html文件，这个过程与其他页是完全相同的，只是这个部分被以Ajax用异步的方式动态的加载并删除到html中。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航