Home Backend Development PHP Tutorial PHP+Mysql+jQuery implements publishing Weibo program jQuery_PHP tutorial

PHP+Mysql+jQuery implements publishing Weibo program jQuery_PHP tutorial

Jul 21, 2016 pm 03:24 PM
jquery release word count accomplish application Weibo program statistics enter

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('Processing...');
$.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.

www.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...
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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

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)

How to make Google Maps the default map in iPhone How to make Google Maps the default map in iPhone Apr 17, 2024 pm 07:34 PM

The default map on the iPhone is Maps, Apple's proprietary geolocation provider. Although the map is getting better, it doesn't work well outside the United States. It has nothing to offer compared to Google Maps. In this article, we discuss the feasible steps to use Google Maps to become the default map on your iPhone. How to Make Google Maps the Default Map in iPhone Setting Google Maps as the default map app on your phone is easier than you think. Follow the steps below – Prerequisite steps – You must have Gmail installed on your phone. Step 1 – Open the AppStore. Step 2 – Search for “Gmail”. Step 3 – Click next to Gmail app

How to search previous Weibo by date on Weibo_How to search previous Weibo by date on Weibo How to search previous Weibo by date on Weibo_How to search previous Weibo by date on Weibo Mar 30, 2024 pm 07:26 PM

1. First open the mobile web browser, search for the Weibo web version, and click the avatar button in the upper left corner after entering. 2. Then click Settings in the upper right corner. 3. Click the version switching option in settings. 4. Then select the color version option in the version switch. 5. Click Search to enter the search page. 6. After entering the keywords, click Find People. 7. When the search completion interface appears, click Filter. 8. Finally, enter the specific date in the release time column and click Filter.

How to set up real-time notifications for Weibo's special attention_How to set up real-time notifications for Weibo's special attention How to set up real-time notifications for Weibo's special attention_How to set up real-time notifications for Weibo's special attention Mar 29, 2024 pm 10:01 PM

1. Open Weibo, click My, and then click the Settings option in the upper right corner. 2. After opening the settings, find and click on the push notification settings inside. 3. After entering the push notification settings, find Special Interest and click Real-time Notification.

How to release someone blocked on Weibo_How to unblock Weibo How to release someone blocked on Weibo_How to unblock Weibo Mar 30, 2024 am 09:51 AM

1. Click [My] in the lower right corner of the Weibo app to enter your personal homepage. 2. Then, click the gear icon in the upper right corner. 3. At this time, we enter the settings page, select [Block Settings] here to enter. 4. In the blocking settings, we can see the friends we have blocked, tap it, and click [Unblock] in the pop-up options. 5. Or users can directly search Weibo users to enter the blocked user homepage, and click [...] on the upper right to remove the blacklist.

Clock app missing in iPhone: How to fix it Clock app missing in iPhone: How to fix it May 03, 2024 pm 09:19 PM

Is the clock app missing from your phone? The date and time will still appear on your iPhone's status bar. However, without the Clock app, you won’t be able to use world clock, stopwatch, alarm clock, and many other features. Therefore, fixing missing clock app should be at the top of your to-do list. These solutions can help you resolve this issue. Fix 1 – Place the Clock App If you mistakenly removed the Clock app from your home screen, you can put the Clock app back in its place. Step 1 – Unlock your iPhone and start swiping to the left until you reach the App Library page. Step 2 – Next, search for “clock” in the search box. Step 3 – When you see “Clock” below in the search results, press and hold it and

How to delete the draft box of 'Weibo'_Tutorial on deleting the draft box of 'Weibo' How to delete the draft box of 'Weibo'_Tutorial on deleting the draft box of 'Weibo' Mar 30, 2024 pm 12:46 PM

1. First open Weibo, click on My, and click on the draft box. 2. Then long press any draft and click to clear the draft box or delete the draft. 3. Finally click OK.

How to post videos on Weibo without compressing the image quality_How to post videos on Weibo without compressing the image quality How to post videos on Weibo without compressing the image quality_How to post videos on Weibo without compressing the image quality Mar 30, 2024 pm 12:26 PM

1. First open Weibo on your mobile phone and click [Me] in the lower right corner (as shown in the picture). 2. Then click [Gear] in the upper right corner to open settings (as shown in the picture). 3. Then find and open [General Settings] (as shown in the picture). 4. Then enter the [Video Follow] option (as shown in the picture). 5. Then open the [Video Upload Resolution] setting (as shown in the picture). 6. Finally, select [Original Image Quality] to avoid compression (as shown in the picture).

How to Undo Delete from Home Screen in iPhone How to Undo Delete from Home Screen in iPhone Apr 17, 2024 pm 07:37 PM

Deleted something important from your home screen and trying to get it back? You can put app icons back on the screen in a variety of ways. We have discussed all the methods you can follow and put the app icon back on the home screen. How to Undo Remove from Home Screen in iPhone As we mentioned before, there are several ways to restore this change on iPhone. Method 1 – Replace App Icon in App Library You can place an app icon on your home screen directly from the App Library. Step 1 – Swipe sideways to find all apps in the app library. Step 2 – Find the app icon you deleted earlier. Step 3 – Simply drag the app icon from the main library to the correct location on the home screen. This is the application diagram

See all articles