Home Backend Development PHP Tutorial PHP+Mysql+jQuery实现发布微博程序 jQuery篇_php技巧

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

May 17, 2016 am 09:15 AM

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

首先查看示例:DEMO


XHTML

复制代码 代码如下:


140说说你正在做什么...













Demo发布的内容...








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文件:
复制代码 代码如下:




global.js文件:
global.js要做的事有:
1、用户输入、鼠标离开输入框时,统计输入的字符数,并根据输入字数的不同而输出不同的样式(字体颜色)显示在页面上。
2、处理提交数据:当点击“发布”按钮时,显示等待图片,通过ajax想后台提交输入的数据,等待后台处理,并将处理结果输出给前端页面。
具体代码如下:
复制代码 代码如下:

function recount(){
var maxlen=140;
var current = maxlen-$('#saytxt').val().length;
$('.counter').html(current);
if(currentmaxlen){
$('.counter').css('color','#D40D12');
$('input.sub_btn').attr('disabled','disabled');
}
else
$('input.sub_btn').removeAttr('disabled');
if(current$('.counter').css('color','#D40D12');
else if(current$('.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('正在处理...');
$.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进行处理,关于后台的处理程序,我在下一篇文章会重点讲解,敬请关注。
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

11 Best PHP URL Shortener Scripts (Free and Premium) 11 Best PHP URL Shortener Scripts (Free and Premium) Mar 03, 2025 am 10:49 AM

11 Best PHP URL Shortener Scripts (Free and Premium)

Working with Flash Session Data in Laravel Working with Flash Session Data in Laravel Mar 12, 2025 pm 05:08 PM

Working with Flash Session Data in Laravel

Build a React App With a Laravel Back End: Part 2, React Build a React App With a Laravel Back End: Part 2, React Mar 04, 2025 am 09:33 AM

Build a React App With a Laravel Back End: Part 2, React

Simplified HTTP Response Mocking in Laravel Tests Simplified HTTP Response Mocking in Laravel Tests Mar 12, 2025 pm 05:09 PM

Simplified HTTP Response Mocking in Laravel Tests

cURL in PHP: How to Use the PHP cURL Extension in REST APIs cURL in PHP: How to Use the PHP cURL Extension in REST APIs Mar 14, 2025 am 11:42 AM

cURL in PHP: How to Use the PHP cURL Extension in REST APIs

12 Best PHP Chat Scripts on CodeCanyon 12 Best PHP Chat Scripts on CodeCanyon Mar 13, 2025 pm 12:08 PM

12 Best PHP Chat Scripts on CodeCanyon

Announcement of 2025 PHP Situation Survey Announcement of 2025 PHP Situation Survey Mar 03, 2025 pm 04:20 PM

Announcement of 2025 PHP Situation Survey

Notifications in Laravel Notifications in Laravel Mar 04, 2025 am 09:22 AM

Notifications in Laravel

See all articles