头像

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

来源:http://school.sxbd100.com/ajax/325.html 代码交流管理员 2018-04-24浏览(631)

QQ个人中心或者新浪微博等网站上可以看到一个发表话题的应用。该应用实现了即时统计输入字数,并且通过ajax与后台交互,将输入内容插入到话题列表中。我将整个流程分为两部分,本文讲解第一部分jquery实现前端交互操作。

程序员,你不是一个人;网站开发QQ群:136483411  在线充值,或联系QQ 304534221直接充值

PHP+Mysql+jQuery实现发布微博程序
分类:首页>>PHP/Mysql>>Ajax 阅读次数:632
查看演示 下载次数: 11

手机扫码访问:

下载资源 下载积分: 60

HTML

<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>

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('<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();
 }
  }
    });
return false;
});
});


标签:
声明:本文为原创文章,如需转载,请注明来源school.sxbd100.com并保留原文链接:http://school.sxbd100.com/ajax/325.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>