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


Posted in PHP onOctober 08, 2011

该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中。我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作。

首先查看示例:DEMO

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

<form id="myform" action="" method="post"> 
<h3><span class="counter">140</span>说说你正在做什么...</h3> 
<textarea name="saytxt" id="saytxt" class="input" rows="2" cols="40"></textarea> 
<p> 
<input type="image" src="images/btn.gif" class="sub_btn" alt="发布" /> 
<span id="msg"></span> 
</p> 
</form> 
<div class="clear"></div> 
<div id="saywrap"> 
<div class="saylist"> 
<a href="#"><img src="images/user.gif" alt="" /></a> 
<div class="saytxt"> 
<p><strong><a href="#">Demo</a></strong>发布的内容...</p> 
<div class="date"></div> 
</div> 
<div class="clear"></div> 
</div> 
</div>

XHTML是一个表单,里面有输入框textarea,发布按钮,还有一个统计输入字数的span#counter,和信息提示span#msg,在没有输入的情况下就提交则会提示用户要求输入内容。
CSS
h3{height:32px; line-height:32px; font-size:18px} 
h3 span{float:right; font-size:32px; font-family:Georgia,serif; color:#ccc; overflow:hidden} 
.input{width:594px; height:58px; margin:5px 0 10px 0; padding:4px 2px; 
border:1px solid #aaa; font-size:12px; line-height:18px; overflow:hidden} 
.sub_btn{float:right; width:94px; height:28px;} 
#msg{color:#f30} 
.clear{clear:both} 
.saylist{margin:8px auto; padding:4px 0; border-bottom:1px dotted #d3d3d3} 
.saylist img{float:left; width:50px; margin:4px} 
.saytxt{float:right; width:530px; overflow:hidden} 
.saytxt p{line-height:18px} 
.saytxt p strong{margin-right:6px} 
.date{color:#999}

jQuery
先引入jquery库和global.js文件:
<script type="text/javascript" src="../Script/jquery.js"></script> 
<script type="text/javascript" src="./Script/global.js"></script>

global.js文件:
global.js要做的事有:
1、用户输入、鼠标离开输入框时,统计输入的字符数,并根据输入字数的不同而输出不同的样式(字体颜色)显示在页面上。
2、处理提交数据:当点击“发布”按钮时,显示等待图片,通过ajax想后台提交输入的数据,等待后台处理,并将处理结果输出给前端页面。
具体代码如下:
function recount(){ 
var maxlen=140; 
var current = maxlen-$('#saytxt').val().length; 
$('.counter').html(current); 
if(current<1 || current>maxlen){ 
$('.counter').css('color','#D40D12'); 
$('input.sub_btn').attr('disabled','disabled'); 
} 
else 
$('input.sub_btn').removeAttr('disabled'); 
if(current<10) 
$('.counter').css('color','#D40D12'); 
else if(current<20) 
$('.counter').css('color','#5C0002'); 
else 
$('.counter').css('color','#cccccc'); 
}

函数recount()完成了输入字符的统计,并根据输入的字符数,显示不同的字体颜色。
$(function(){ 
$('#saytxt').bind("blur focus keydown keypress keyup", function(){ 
recount(); 
}); 
$("#myform").submit(function(){ 
var saytxt = $("#saytxt").val(); 
if(saytxt==""){ 
$("#msg").show().html("你总得说点什么吧.").fadeOut(2000);; 
return false; 
} 
$('.counter').html('<img style="padding:8px" src="images/load.gif" alt="正在处理..." />'); 
$.ajax({ 
type: "POST", 
url: "submit.php", 
data:"saytxt="+saytxt, 
dataType: "html", 
success: function(msg){ 
if(parseInt(msg)!=0){ 
$('#saywrap').prepend(msg); 
$('#saytxt').val(''); 
recount(); 
}else{ 
$("#msg").show().html("系统错误.").fadeOut(2000); 
return false 
} 
} 
}); 
return false; 
}); 
});

提交数据给后台后,由submit.php进行处理,关于后台的处理程序,我在下一篇文章会重点讲解,敬请关注。
PHP 相关文章推荐
支持php4、php5的mysql数据库操作类
Jan 10 PHP
在PHP中使用curl_init函数的说明
Nov 02 PHP
php下通过curl抓取yahoo boss 搜索结果的实现代码
Jun 10 PHP
PHP5中新增stdClass 内部保留类
Jun 13 PHP
PHP文章采集URL补全函数(FormatUrl)
Aug 02 PHP
php中读写文件与读写数据库的效率比较分享
Oct 19 PHP
浅谈PHP变量作用域以及地址引用问题
Dec 27 PHP
PHP中字符安全过滤函数使用小结
Feb 25 PHP
php常用数组函数实例小结
Dec 29 PHP
PHP+redis实现的购物车单例类示例
Feb 02 PHP
关于laravel 子查询 &amp; join的使用
Oct 16 PHP
tp5框架前台无限极导航菜单类实现方法分析
Mar 29 PHP
php实现用户在线时间统计详解
Oct 08 #PHP
php 文件缓存函数
Oct 08 #PHP
php数字转汉字代码(算法)
Oct 08 #PHP
PHP判断远程url是否有效的几种方法小结
Oct 08 #PHP
php下利用curl判断远程文件是否存在的实现代码
Oct 08 #PHP
PHP下判断网址是否有效的代码
Oct 08 #PHP
Admin generator, filters and I18n
Oct 06 #PHP
You might like
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP的一个基础知识 表单提交
2011/07/04 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
js密码强度检测
2016/01/07 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能
2019/11/12 Javascript
微信小程序实现点击页面出现文字
2020/09/21 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
详解Django中的过滤器
2015/07/16 Python
python安装cx_Oracle模块常见问题与解决方法
2017/02/21 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Python为何不能用可变对象作为默认参数的值
2019/07/01 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python如何输出警告信息
2020/07/30 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
电脑教师的教学自我评价
2013/11/26 职场文书
2016年三八红旗手先进事迹材料
2016/02/26 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
pandas中pd.groupby()的用法详解
2022/06/16 Python