PHP + Mysql + jQuery implement microblog program jQuery

This application enables real-time statistics on the number of input words, and interacts with the background through ajax to insert the input content into the topic list. I divided the entire process into two parts. This article explains the first part of jquery's frontend interactive operations.

First view the example: DEMO

XHTML
Copy codeThe Code is as follows:
<Form id = "myform" action = "" method = "post">
<H3> <span class = "counter"> 140 </span> tell me what you are doing... <Textarea name = "saytxt" id = "saytxt" class = "input" rows = "2" cols = "40"> </textarea>
<P>
<Input type = "image" src = "images/btn.gif" class = "sub_btn" alt = "publish"/>
<Span id = "msg"> </span>
</P>
</Form>
<Div class = "clear"> </div>
<Div id = "saywrap">
<Div class = "saylist">
<A href = "#"> </a>
<Div class = "saytxt">
<P> <strong> <a href = "#"> Demo </a> </strong> published content... </p>
<Div class = "date"> </div>
</Div>
<Div class = "clear"> </div>
</Div>
</Div>

XHTML is a form with the input box textarea, the publish button, a span # counter that counts the number of input words, and a message indicating span # msg, if no input is provided, the system prompts you to enter the content.
CSS
Copy codeThe 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 the global. js file:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "../Script/jquery. js"> </script>
<Script type = "text/javascript" src = "./Script/global. js"> </script>

Global. js file:
Global. js has to do the following:
1. When a user inputs and moves the mouse away from the input box, the number of characters entered is counted and different styles (font color) are output based on the number of words entered.
2. process and submit data: When you click the "publish" button, the waiting image is displayed. You can use ajax to submit the input data in the background, wait for processing in the background, and output the processing result to the front-end page.
The Code is as follows:
Copy codeThe Code is as follows:
Function recount (){
Var maxlen = 140;
Var current = maxlen-$ ('# saytxt'). val (). length;
Certificate ('.counter'{.html (current );
If (current <1 | current> maxlen ){
(('.Counter'0000.css ('color', '# D40D12 ');
$ ('Input. sub_btn '). attr ('Disabled', 'Disabled ');
}
Else
$ ('Input. sub_btn '). removeAttr ('Disabled ');
If (current <10)
(('.Counter'0000.css ('color', '# D40D12 ');
Else if (current <20)
(('.Counter'0000.css ('color', '#5C0002 ');
Else
(('.Counter'0000.css ('color', '# cccccc ');
}

The recount () function completes the input character statistics and displays different font colors based on the number of characters entered.
Copy codeThe Code is as follows:
$ (Function (){
$ ('# Saytxt'). bind ("blur focus keydown keypress keyup", function (){
Recount ();
});
$ ("# Myform"). submit (function (){
Var saytxt = $ ("# saytxt"). val ();
If (saytxt = ""){
$ ("# Msg" cmd.show(cmd.html ("You have to say something."). fadeOut (2000 );;
Return false;
}
Parameters ('.counter'hangzhou.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" cmd.show(cmd.html ("system error."). fadeOut (2000 );
Return false
}
}
});
Return false;
});
});

After the data is submitted to the backend, submit. php will process the data. I will focus on background processing programs in the next article, so stay tuned.