PHP+Mysql+jQuery实现发布微博程序 php篇

先还是要说明本例的业务流程:
1、前端用户输入内容,并对输入的内容字数进行实时统计。
2、用户提交数据,jQuery实现通过Ajax向后台发送数据。
3、后台PHP接收提交表单的数据,并对数据进行必要的安全过滤。
4、后台PHP连接Mysql数据库,并将提交过来的表单数据写入到相应的数据表中。
5、后台向返回成功结果数据内容,并通过Ajax将返回的数据内容插入到前端页面中。
上述1、2步在前篇文章:jQuery篇已讲解了,本文将完成剩余的散步。

效果图:

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

CREATE TABLE `say` (
 `id` int(11) NOT NULL auto_increment,
 `userid` int(11) NOT NULL default '0',
 `content` varchar(200) NOT NULL,
 `addtime` int(10) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

注意,本例中将时间字段:addtime的类型设置为int,是为了后续的时间处理方便,在很多应用中(如Discuz论坛)都是将时间类型转成数字型。
时间轴处理函数和格式化输出列表函数:
时间轴处理函数,就是把时间转换成我们看到的诸如“5分钟前”,“昨天 10:21”等形式,代码如下:

/*时间转换函数*/
function tranTime($time) {
 $rtime = date("m-d H:i",$time);
 $htime = date("H:i",$time);
 $time = time() - $time; 

 if ($time < 60) {
  $str = '刚刚';
 }
 elseif ($time < 60 * 60) {
  $min = floor($time/60);
  $str = $min.'分钟前';
 }
 elseif ($time < 60 * 60 * 24) {
  $h = floor($time/(60*60));
  $str = $h.'小时前 '.$htime;
 }
 elseif ($time < 60 * 60 * 24 * 3) {
  $d = floor($time/(60*60*24));
  if($d==1)
   $str = '昨天 '.$rtime;
  else
   $str = '前天 '.$rtime;
 }
 else {
  $str = $rtime;
 }
 return $str;
}

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

function formatSay($say,$dt,$uid){
 $say=htmlspecialchars(stripslashes($say)); 

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

将以上两个函数都放入function.php中,准备随时被调用。
submit.php处理表单数据
在之前文章中,我们知道jQuery将前端获得的数据以POST方式,通过Ajax提交给了后台的submit.php。那么submit就是要完成后续的所有一摊子任务。请看代码:

require_once('connect.php'); //数据库连接文件
require_once('function.php'); //函数调用文件 

$txt=stripslashes($_POST['saytxt']); //获取提交的数据
$txt=mysql_real_escape_string(strip_tags($txt),$link); //过滤HTML标签,并转义特殊字符
if(mb_strlen($txt)<1 || mb_strlen($txt)>140)
 die("0"); //判断输入字符数是否符合要求
$time=time(); //获取当前时间
$userid=rand(0,4);
//插入数据到数据表中
$query=mysql_query("insert into say(userid,content,addtime)values('$userid','$txt','$time')");
if(mysql_affected_rows($link)!=1)
 die("0");
echo formatSay($txt,$time,$userid); //调用函数输出结果

注意,本例中为了演示,将用户ID(userid)进行随机处理,实际的应用是获取当前用户的ID。另外数据库连接文件,大家可以自己写一个,在我提供的下载的DEMO里也有这个文件。
最后要回到前端页面index.php来。index.php主要除了提供输入的入口,还要承接后台处理返回的结果,并且要将数据库里已有的数据显示出来。代码如下:

<?php
define('INCLUDE_CHECK',1);
require_once('connect.php');
require_once('function.php'); 

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

(0)

相关推荐

  • PHP+Mysql+jQuery实现发布微博程序 jQuery篇

    该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中.我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作. 首先查看示例:DEMO XHTML 复制代码 代码如下: <form id="myform" action="" method="post"> <h3><span class="counter">140</span>说说你正

  • 基于javascript制作微博发布栏效果

    本文为大家分享了做微博发布栏效果的过程,涉及到的知识点包括以下: 1.判断IE的方法:直接用  var ie=!-[1,];即可 2.连续发生事件的用法:  IE下:触发对象.onpropertychange  标准下:触发对象.oninput 3.焦点聚集和移开事件.onfocus和onblur 4.判断单字节(0-255之间)与双子节:正则表达式:/[^\x00-\xff]/g 代码如上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • JS实现仿新浪微博发布内容为空时提示功能代码

    本文实例讲述了JS实现仿新浪微博发布内容为空时提示功能.分享给大家供大家参考.具体如下: 这里使用JavaScript模拟新浪微博的一个功能,在发布微博的内容为空时,文本框提醒用户这里没有输入内容,本功能让人感觉网页很智能,在和你对话一样,很人性化.本特效引用了一个外部了JS封装类,你可下载到本地使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fsina-info-submit-empty-style-codes/ 具体代码如下:

  • 基于jquery DOM写的类似微博发布的效果

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>微博发布jq版</title> <meta name="Keywords" content=""> <meta name="Description" content="">

  • js仿新浪微博消息发布功能

    本文实例为大家分享了js仿新浪微博消息发布的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仿新浪微博消息发布功能</title> <style> *{margin: 0; padding: 0;} #div1{width: 400px; height: 400px; border: 1px so

  • JS实现模仿微博发布效果实例代码

    效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        *        {            margin: 0;

  • 使用新浪微博API的OAuth认证发布微博实例

    继续前面的文章<新浪微博OAuth认证和储存的主要过程详解>,现在我们就使用它来发布微博. 我们已经将用户新浪微博的oauth_token和oauth_secret保存到 $_SESSION['oauth_token']=$result['oauth_token']; $_SESSION['oauth_secret']=$result['oauth_secret']; 里面,现在要做的就很简单了··就是调用sinaOauth的类进行发布.. 代码如下: //Statuses/update $c

  • 基于jQuery实现仿微博发布框字数提示

    jQuery实现仿微博发布框字数提示,主要是运用字符串操作! 效果图: HTML: <textarea name="" id="" cols="30" rows="10"></textarea><br> <span>你还可以输入<strong style="color:red;">140</strong>个字</span>

  • JavaScript仿微博发布信息案例

    现在很多类似以微博发布动态的效果,下面为一个用 JavaScript写的小小的类似微博发布信息的案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0;

  • 原生JavaScript制作微博发布面板效果

    javaScript实现微博发布面板效果.采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninput.onpropertychange等事件 动态添加元素,获取设置动态属性 基本思路: 当内容为空时,发布按钮为灰色,点击时候文本框会闪动,输入文字会提示还可以输入多少文字,超出会提示,且不能发布,要注意的是,判断文本框内容的长度,不能直接来,因为英文属于一个字节,中文占两个,要用正则处理一下! 获取到所有头像的s

随机推荐