当前位置:  开发笔记 > 前端 > 正文

PHP+MySQL+jQuery实现发布微博程序

在微博网站可以看到一个发表话题的应用,文章将介绍如何简易的实现一个微博话题发表程序jQuery篇,后续还会有关于后台处理程序的讲解。我们在QQ个人中心或者新浪微博等网站上可以看到一个发表话题的应用。该应用实现了即时统计输入字数,并且通过Ajax与后台">

 在微博网站可以看到一个发表话题的应用,文章将介绍如何简易的实现一个微博话题发表程序——jQuery篇,后续还会有关于后台处理程序的讲解。

          我们在QQ个人中心或者新浪微博等网站上可以看到一个发表话题的应用。该应用实现了即时统计输入字数,并且通过Ajax与后台交互,将输入内容插入到话题列表中。

PHP+MySQL+jQuery实现发布微博程序
 

     XHTML代码

<form id="myform" action="say.php" method="post">
          
<h3><span class="counter">140span>说说你正在做什么...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="#">Demoa>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="js/jquery.js">script>   
<script type="text/Javascript" src="js/global.js">script>

   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(1200);;                            
return 
false;                  
}                  
$(
'.counter').html('正在处理...');                  
$.ajax({                           type: "POST",                           url: "submit.php",                           data:"saytxt="+saytxt,                         dataType: "html",                           success: function(msg){                                  
if(parseInt(msg)!=0){                                        $('#saywrap').prepend(msg);                                        $('#saytxt').val('');                                        recount();                                 
}                     
}               
});               
return 
false;          
});   
});  

   提交数据给后台后,由submit.php进行处理。


推荐阅读
  • Java实战之电影在线观看系统的实现
    本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述,然后展示了系统的效果图。接着介绍了系统的核心代码,包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明,包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Html5-Canvas实现简易的抽奖转盘效果
    本文介绍了如何使用Html5和Canvas标签来实现简易的抽奖转盘效果,同时使用了jQueryRotate.js旋转插件。文章中给出了主要的html和css代码,并展示了实现的基本效果。 ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • HTML5网页模板怎么加百度统计?
    本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]
  • 例如控件ID为user.id使用$(#user.id)不能得到正确的结果必须使用\\转义即$(#user\\.id)转载于:https:www.cnblogs.comrch ... [详细]
author-avatar
手机用户2602927977
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有