PHP + Mysql + jQuery implement microblog program jQuery _ php skills

We can see a topic posting application on websites such as QQ personal center or Sina Weibo. this application enables real-time statistics on the number of input words and interacts with the background through ajax, insert the input content to 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

The code is as follows:

DemoReleased content...

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

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 the global. js file:

The code is as follows: