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 相关文章推荐
php中定时计划任务的实现原理
Jan 08 PHP
php 判断是否是中文/英文/数字示例代码
Sep 30 PHP
PHP SPL使用方法和他的威力
Nov 12 PHP
PHP模板引擎Smarty的缓存使用总结
Apr 24 PHP
PHP基于数组实现的分页函数实例
Aug 20 PHP
php无限分类使用concat如何实现
Nov 05 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
May 26 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
Jun 28 PHP
PHP中trait使用方法详细介绍
May 21 PHP
浅谈Laravel中的一个后期静态绑定
Aug 11 PHP
php通过pecl方式安装扩展的实例讲解
Feb 02 PHP
PHP查找一列有序数组是否包含某值的方法
Feb 07 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
德生PL330测评
2021/03/02 无线电
php4的session功能评述(二)
2006/10/09 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
PHP两种去掉数组重复值的方法比较
2014/06/19 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
javascript 函数调用的对象和方法
2010/07/01 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
2014/10/11 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
Javascript实现Array和String互转换的方法
2015/12/21 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python中使用copy模块实现列表(list)拷贝
2015/04/14 Python
python实用代码片段收集贴
2015/06/03 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python之reload流程实例代码解析
2018/01/29 Python
python查看模块,对象的函数方法
2018/10/16 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
python之array赋值技巧分享
2019/11/28 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
python实现Oracle查询分组的方法示例
2020/04/30 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
公司员工检讨书
2014/02/08 职场文书
《乞巧》教学反思
2014/02/27 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS
MySQL数据库查询进阶之多表查询详解
2022/04/08 MySQL
Python 图片添加美颜效果
2022/04/28 Python