PHP+Mysql+jQuery implements publishing Weibo program jQuery_PHP tutorial

The application realizes real-time statistics of the number of input words, and interacts with the background through ajax to insert the input content into the topic list. I divide the whole process into two parts. This article explains the first part of jquery's implementation of front-end interactive operations.

Check out the example first: DEMO

XHTML

Copy code The code is as follows:

140Tell me what you are doing...

> ;

DemoPublished content...

XHTML is a form, which has an input box textarea, a publish button, a span#counter that counts the number of words entered, and a message prompt span#msg. When there is no input If submitted, the user will be prompted to enter content.
CSS

Copy code The code is as follows:

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
First introduce the jquery library and global.js File:

Copy code The code is as follows:

global.js file:
Global.js does the following:
1. When the user inputs or the mouse leaves the input box, count the number of characters entered and output different characters according to the number of words entered. The style (font color) is displayed on the page.
2. Process submitted data: When the "Publish" button is clicked, the waiting image is displayed, the input data is submitted to the background through ajax, waits for background processing, and the processing results are output to the front-end page.
The specific code is as follows:

Copy code The code is as follows:

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

The function recount() completes the statistics of input characters and calculates the statistics based on the number of characters entered. , showing different font colors.

Copy code The code is as follows:

$(function(){
$('#saytxt').bind("blur focus keydown keypress keyup", function(){
recount();
});
$("#myform").submit(function(){
var saytxt = $("#saytxt").val();
if(saytxt==""){
$("#msg").show().html("You have to say something.").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("System error.").fadeOut(2000);
return false
}
}
});
return false;
});
});

After the data is submitted to the background, it will be processed by submit.php, regarding the background processing I will focus on the procedure in the next article, so stay tuned.

http://www.bkjia.com/PHPjc/324372.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/324372.htmlTechArticleThis application realizes real-time statistics of the number of input words, and interacts with the background through ajax to insert the input content into the topic list . I divided the whole process into two parts. This article explains the first part...