PHP+MySQL+jQuery は Weibo プログラムの公開を実装します - PHP_PHP チュートリアル

在上一篇《PHP+MySQL+jQuery实现发布微博程序——jQuery篇》中，讲解了如何用jQuery实现输入表单的实时字数统计和Ajax提交数据到后台的功能。本文将重要介绍后台是如何处理前台提交的数据，并返回结果的。

先还是要说明本例的业务流程：

1、前端用户输入内容，并对输入的内容字数进行实时统计。

2、用户提交数据，jQuery实现通过Ajax向后台发送数据。

3、后台PHP接收提交表单的数据，并对数据进行必要的安全过滤。

4、后台PHP连接Mysql数据库，并将提交过来的表单数据写入到相应的数据表中。

5、后台向返回成功结果数据内容，并通过Ajax将返回的数据内容插入到前端页面中。

上述1、2步在前篇文章：jQuery篇已讲解了，本文将完成剩余的部分。

数据表首先我们要准备一个数据表，表结构如下：

<ol class="dp-xml">
<li class="alt"><span><span>CREATE TABLE `say` (     </span></span></li>
<li><span>    `id` int(11) NOT NULL auto_increment,     </span></li>
<li class="alt"><span>    `userid` int(11) NOT NULL default '0',     </span></li>
<li><span>    `content` varchar(200) NOT NULL,     </span></li>
<li class="alt"><span>    `addtime` int(10) NOT NULL,     </span></li>
<li>
<span>    PRIMARY KEY  (`id`) ) </span><span class="attribute">ENGINE</span><span>=</span><span class="attribute-value">MyISAM</span><span>  DEFAULT </span><span class="attribute">CHARSET</span><span>=</span><span class="attribute-value">utf8</span><span>; </span>
</li>
</ol>

注意，本例中将时间字段：addtime的类型设置为int，是为了后续的时间处理方便，在很多应用中如Discuz论坛）都是将时间类型转成数字型。

时间轴处理函数和格式化输出列表函数：时间轴处理函数，就是把时间转换成我们看到的诸如“5分钟前”，“昨天 10:21”等形式，详细使用可以查看之前我写过的文章：PHP实现时间轴函数，代码如下：

<ol class="dp-xml">
<li class="alt"><span><span>/*时间转换函数*/   </span></span></li>
<li><span>function tranTime($time) {       </span></li>
<li class="alt">
<span>    $</span><span class="attribute">rtime</span><span> = </span><span class="attribute-value">date</span><span>("m-d H:i",$time);       </span>
</li>
<li>
<span>    $</span><span class="attribute">htime</span><span> = </span><span class="attribute-value">date</span><span>("H:i",$time);       </span>
</li>
<li class="alt">
<span>    $</span><span class="attribute">time</span><span class="attribute-value">time</span><span> = time() - $time;       </span>
</li>
<li><span> </span></li>
<li class="alt">
<span>    if ($time </span><span class="tag"><</span><span> </span><span class="tag-name">60</span><span>) {           </span></li><li><span>       $</span><span class="attribute">str</span><span> = </span><span class="attribute-value">'刚刚'</span><span>;       </span></li><li class="alt"><span>    }       </span></li><li><span>    else if ($time </span><span class="tag"><</span><span> </span><span class="tag-name">60</span><span> * 60) {           </span></li><li class="alt"><span>       $</span><span class="attribute">min</span><span> = </span><span class="attribute-value">floor</span><span>($time/60);           </span></li><li><span>       $</span><span class="attribute">str</span><span> = $min.'分钟前';       </span></li><li class="alt"><span>    }       </span></li><li><span>    else if ($time </span><span class="tag"><</span><span> </span><span class="tag-name">60</span><span> * 60 * 24) {           </span></li><li class="alt"><span>       $</span><span class="attribute">h</span><span> = </span><span class="attribute-value">floor</span><span>($time/(60*60));           </span></li><li><span>       $</span><span class="attribute">str</span><span> = $h.'小时前 '.$htime;       </span></li><li class="alt"><span>    }       </span></li><li><span>    else if ($time </span><span class="tag"><</span><span> </span><span class="tag-name">60</span><span> * 60 * 24 * 3) {           </span></li><li class="alt"><span>       $</span><span class="attribute">d</span><span> = </span><span class="attribute-value">floor</span><span>($time/(60*60*24));           </span></li><li><span>       if($</span><span class="attribute">d</span><span>==1)              </span></li><li class="alt"><span>       $</span><span class="attribute">str</span><span> = </span><span class="attribute-value">'昨天 '</span><span>.$rtime;           </span></li><li><span>    else              </span></li><li class="alt"><span>       $</span><span class="attribute">str</span><span> = </span><span class="attribute-value">'前天 '</span><span>.$rtime;       </span></li><li><span>    }       </span></li><li class="alt"><span>    else {           </span></li><li><span>       $</span><span class="attribute">str</span><span> = $rtime;       </span></li><li class="alt"><span>    }       </span></li><li><span>return $str;   </span></li><li class="alt"><span>} </span></li></ol>

格式化输出函数是将得到的用户信息和发布内容及时间按照一定的格式输出到前端页面的函数，代码如下：

<ol class="dp-xml"><li class="alt"><span><span>function formatSay($say,$dt,$uid){       </span></span></li><li><span>     $</span><span class="attribute">say</span><span>=</span><span class="attribute-value">htmlspecialchars</span><span>(stripslashes($say));       </span></li><li class="alt"><span> </span></li><li><span>     return'       </span></li><li class="alt"><span>     </span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"saylist"</span><span class="tag">></span><span> </span>
</li>
<li>
<span>     </span><span class="tag"><</span><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">img</span><span> </span><span class="attribute">src</span><span>=</span><span class="attribute-value">"images/'.$uid.'.jpg"</span><span> </span><span class="attribute">width</span><span>=</span><span class="attribute-value">"50"</span><span> </span><span class="attribute">height</span><span>=</span><span class="attribute-value">"50"</span><span>  </span><span class="attribute">alt</span><span>=</span><span class="attribute-value">"demo"</span><span> </span><span class="tag">/></span><span> </span>
</li>
<li class="alt">
<span>     </span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span>       </span>
</li>
<li>
<span>     </span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"saytxt"</span><span class="tag">></span><span>       </span>
</li>
<li class="alt">
<span>     </span><span class="tag"><</span><span class="tag-name">p</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">strong</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"#"</span><span class="tag">></span><span>demo_'.$uid.'</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">strong</span><span class="tag">></span><span> '.    </span>
</li>
<li><span>     preg_replace('/((?:http|https|ftp):\/\/(?:[A-Z0-9][A-Z0-9_-]*(?:\.[A-Z0-9][A-Z0-9_-]*)+): ?(\d+)?\/?[^\s\"\']+)/i',  </span></li>
<li class="alt">
<span>     '</span><span class="tag"><</span><span class="tag-name">a</span><span> </span><span class="attribute">href</span><span>=</span><span class="attribute-value">"$1"</span><span> </span><span class="attribute">rel</span><span>=</span><span class="attribute-value">"nofollow"</span><span>     </span><span class="attribute">target</span><span>=</span><span class="attribute-value">"blank"</span><span class="tag">></span><span>$1</span><span class="tag"></</span><span class="tag-name">a</span><span class="tag">></span><span>',$say).'       </span>
</li>
<li>
<span>     </span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span> </span>
</li>
<li class="alt">
<span>     </span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"date"</span><span class="tag">></span><span>'.tranTime($dt).'</span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span>       </span>
</li>
<li>
<span>     </span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span>       </span>
</li>
<li class="alt">
<span>     </span><span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"clear"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span>       </span>
</li>
<li>
<span>     </span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span>'  </span>
</li>
<li class="alt"><span>; } </span></li>
</ol>

将以上两个函数都放入function.php中，准备随时被调用。

submit.php处理表单数据

在上篇文章中，我们知道jQuery将前端获得的数据以POST方式，通过Ajax提交给了后台的submit.php。那么submit就是要完成后续的所有一摊子任务。请看代码：

<ol class="dp-xml">
<li class="alt"><span><span>require_once('connect.php'); //数据库连接文件   </span></span></li>
<li><span>require_once('function.php');  //函数调用文件   </span></li>
<li class="alt"><span> </span></li>
<li>
<span>$</span><span class="attribute">txt</span><span>=</span><span class="attribute-value">stripslashes</span><span>($_POST['saytxt']); //获取提交的数据   </span>
</li>
<li class="alt">
<span>$</span><span class="attribute">txt</span><span>=</span><span class="attribute-value">mysql_real_escape_string</span><span>(strip_tags($txt),$link); //过滤HTML标签，并转义特殊字符   </span>
</li>
<li>
<span>if(mb_strlen($txt)</span><span class="tag"><</span><span class="tag-name">1</span><span> || mb_strlen($txt)</span><span class="tag">></span><span>140)       </span>
</li>
<li class="alt"><span>   die("0"); //判断输入字符数是否符合要求  </span></li>
<li><span> </span></li>
<li class="alt">
<span>$</span><span class="attribute">time</span><span class="attribute-value">time</span><span>=time(); //获取当前时间   </span>
</li>
<li>
<span>$</span><span class="attribute">userid</span><span>=</span><span class="attribute-value">rand</span><span>(0,4);    </span>
</li>
<li class="alt"><span>//插入数据到数据表中   </span></li>
<li>
<span>$</span><span class="attribute">query</span><span>=</span><span class="attribute-value">mysql_query</span><span>("insert into say(userid,content,addtime)values('$userid','$txt','$time')");   </span>
</li>
<li class="alt"><span>if(mysql_affected_rows($link)!=1)       </span></li>
<li><span>    die("0");   </span></li>
<li class="alt"><span>echo formatSay($txt,$time,$userid); //调用函数输出结果 </span></li>
</ol>

注意，本例中为了演示，将用户ID(userid)进行随机处理，实际的应用是获取当前用户的ID。另外数据库连接文件，大家可以自己写一个，在我提供的下载的DEMO里也有这个文件。

最后要回到前端页面index.php来。index.php主要除了提供输入的入口，还要承接后台处理返回的结果，并且要将数据库里已有的数据显示出来。代码如下：

<ol class="dp-xml">
<li class="alt"><span><span class="tag"><?</span><span class="tag-name">php</span><span>   </span></span></li><li><span>define('INCLUDE_CHECK',1);   </span></li><li class="alt"><span>require_once('connect.php');   </span></li><li><span>require_once('function.php');   </span></li><li class="alt"><span> </span></li><li><span>$</span><span class="attribute">query</span><span>=</span><span class="attribute-value">mysql_query</span><span>("select * from say order by id desc limit 0,10");   </span></li><li class="alt"><span>while ($</span><span class="attribute">row</span><span>=</span><span class="attribute-value">mysql_fetch_array</span><span>($query)) {       </span></li><li><span>   $</span><span class="attribute">sayList.</span><span>=</span><span class="attribute-value">formatSay</span><span>($row[content],$row[addtime],$row[userid]);   </span></li><li class="alt"><span>}   </span></li><li><span class="tag">?></span><span>   </span></span></li>
<li class="alt">
<span class="tag"><</span><span class="tag-name">form</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"myform"</span><span> </span><span class="attribute">action</span><span>=</span><span class="attribute-value">"say.php"</span><span> </span><span class="attribute">method</span><span>=</span><span class="attribute-value">"post"</span><span class="tag">></span><span>      </span>
</li>
<li>
<span>   </span><span class="tag"><</span><span class="tag-name">h3</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">span</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"counter"</span><span class="tag">></span><span>140</span><span class="tag"></</span><span class="tag-name">span</span><span class="tag">></span><span>说说你正在做什么...</span><span class="tag"></</span><span class="tag-name">h3</span><span class="tag">></span><span>      </span>
</li>
<li class="alt">
<span>   </span><span class="tag"><</span><span class="tag-name">textarea</span><span> </span><span class="attribute">name</span><span>=</span><span class="attribute-value">"saytxt"</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"saytxt"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"input"</span><span> </span><span class="attribute">tabindex</span><span>=</span><span class="attribute-value">"1"</span><span> </span><span class="attribute">rows</span><span>=</span><span class="attribute-value">"2"</span><span> </span><span class="attribute">cols</span><span>=</span><span class="attribute-value">"40"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">textarea</span><span class="tag">></span><span>      </span>
</li>
<li>
<span>   </span><span class="tag"><</span><span class="tag-name">p</span><span class="tag">></span><span>       </span>
</li>
<li class="alt">
<span>      </span><span class="tag"><</span><span class="tag-name">input</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"submit"</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"sub_btn"</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"提 交"</span><span> </span><span class="attribute">disabled</span><span>=</span><span class="attribute-value">"disabled"</span><span> </span><span class="tag">/></span><span>       </span>
</li>
<li>
<span>      </span><span class="tag"><</span><span class="tag-name">span</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"msg"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">span</span><span class="tag">></span><span>      </span>
</li>
<li class="alt">
<span>   </span><span class="tag"></</span><span class="tag-name">p</span><span class="tag">></span><span>   </span>
</li>
<li>
<span class="tag"></</span><span class="tag-name">form</span><span class="tag">></span><span>   </span>
</li>
<li class="alt">
<span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"clear"</span><span class="tag">></span><span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span>   </span>
</li>
<li>
<span class="tag"><</span><span class="tag-name">div</span><span> </span><span class="attribute">id</span><span>=</span><span class="attribute-value">"saywrap"</span><span class="tag">></span><span>   </span>
</li>
<li class="alt">
<span class="tag"><?</span><span class="tag-name">php</span><span> echo $sayList;</span><span class="tag">?></span><span>   </span>
</li>
<li>
<span class="tag"></</span><span class="tag-name">div</span><span class="tag">></span><span> </span>
</li>
</ol>

至此，本例从前端交互到后台处理程序，全部完成，有兴趣的同学最好亲自动手，才能从中学到乐趣。

http://www.bkjia.com/PHPjc/587917.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/587917.htmlTechArticle在上一篇《PHP+MySQL+jQuery实现发布微博程序jQuery篇》中，讲解了如何用jQuery实现输入表单的实时字数统计和Ajax提交数据到后台的功能。本文...