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中使用crypt()实现用户身份验证的代码
Sep 05 PHP
PHP以及MYSQL日期比较方法
Nov 29 PHP
PHP如何利用P3P实现跨域
Aug 24 PHP
thinkphp实现图片上传功能分享
Mar 04 PHP
简单实用的PHP防注入类实例
Dec 05 PHP
php检查字符串中是否有外链的方法
Jul 29 PHP
PHP的文件操作与算法实现的面试题示例
Aug 10 PHP
php禁用函数设置及查看方法详解
Jul 25 PHP
PHP对象、模式与实践之高级特性分析
Dec 08 PHP
php获取ajax的headers方法与内容实例
Dec 27 PHP
PHP7匿名类的用法示例
Apr 05 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
Dec 20 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
火车头采集器3.0采集图文教程
2007/03/17 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
老生常谈 js中this的指向
2016/06/30 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
2016/08/08 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
vue之数据交互实例代码
2017/06/16 Javascript
浅谈ECMAScript6新特性之let、const
2017/08/02 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
layDate日期控件使用方法详解
2018/11/15 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
js正则表达式简单校验方法
2021/01/03 Javascript
python字典序问题实例
2014/09/26 Python
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
深入理解python中的atexit模块
2017/03/07 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python 对象和json互相转换方法
2018/03/22 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python自动化实现登录获取图片验证码功能
2019/11/20 Python
canvas绘制树形结构可视图形的实现
2020/04/03 HTML / CSS
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
计算机专业应届生求职信
2014/04/06 职场文书
环保倡议书范文
2014/05/12 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
委托公证书格式
2015/01/26 职场文书
小学体育教学随笔
2015/08/14 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang