PHP+Mysql+jQuery は Weibo プログラムの公開を実装します。 jQuery_PHP チュートリアル

このアプリケーションは、入力単語数のリアルタイム統計を実現し、ajax を介してバックグラウンドと対話して、入力コンテンツをトピック リストに挿入します。この記事では、プロセス全体を 2 つの部分に分けて、jquery によるフロントエンド対話型操作の実装の最初の部分を説明します。

最初に例を確認してください: デモ

XHTML

コードをコピーします コードは次のとおりです:

140何をしているのか教えてください...

id=" msg">

;

div class= "saytxt">

デモPHP+Mysql+jQuery は Weibo プログラムの公開を実装します。 jQuery_PHP チュートリアルされたコンテンツ...

div クラス ="日付"

XHTML は、入力ボックスのテキストエリア、PHP+Mysql+jQuery は Weibo プログラムの公開を実装します。 jQuery_PHP チュートリアルボタン、入力された単語数をカウントするspan#counter、およびメッセージ プロンプトspan#msgを含むフォームです。入力せずに送信すると、ユーザーにコンテンツの入力を求めるプロンプトが表示されます。
CSS


コードをコピーします

コードは次のとおりです:


h3{height:32px; font-size:18px} ; フォントファミリー:ジョージア、セリフ; オーバーフロー:非表示}
.input{幅:594px; パディング:4px 2px;フォントサイズ:12px; 行の高さ:18px; オーバーフロー:非表示} .sub_btn{float:right; width:94px; height:28px;}
.clear{clear:both}
.saylist {マージン: 8px 自動; パディング: 4px 0; ボーダーボトム: 1px ドット #d3d3d3}
.saylist {float:left; margin:4px}

.saytxt{float:right; 530px; overflow :hidden} .saytxt p{line-height:18px} .saytxt pstrong{margin-right:6px} .date{color:#999}

jQuery
まず jquery ライブラリとグローバルを紹介します.js ファイル:



コードをコピーします

コードは次のとおりです:


> ;



global.js ファイル:

Global.js は次のことを行う必要があります:
1ユーザー入力、マウスが入力ボックスから離れる このとき、入力された文字数がカウントされ、入力された文字数に応じて異なるスタイル（フォントの色）がページ上に出力されて表示されます。
2. 送信されたデータの処理: 「PHP+Mysql+jQuery は Weibo プログラムの公開を実装します。 jQuery_PHP チュートリアル」ボタンをクリックすると、待機中の画像が表示され、入力データが 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');現在$('.counter').css('color','#D40D12'); else if(current$('.counter').css('color','# 5C0002'); else

$('.counter').css('color','#cccccc')

}


関数 recount() は、入力文字の統計を完了し、それに応じて異なるフォントの色を表示します。入力された文字数。



コードをコピーします

コードは次のとおりです:

$(function(){
$('#saytxt').bind("ぼかしフォーカス キーダウン キープレス キーアップ", function(){
recount();
});
$("#myform").submit (function(){
varsaytxt = $("#saytxt").val();
if(saytxt==""){
$("#msg").show().html("次のようにする必要があります何かを注文してください。").fadeOut(2000);;
return false;
}
$('.counter').html('');
$.ajax({
type: "POST",
url: "submit.php",
data:"saytxt="+saytxt,
dataType: " html",
成功: function(msg){
if(parseInt(msg)!=0){
$('#saywrap').prepend(msg);
$('#saytxt').val(' ' );
recount();
}else{
$("#msg").show().html("システム エラー。").fadeOut(2000); return false;
});
});


データをバックエンドに送信した後、submit.php によって処理されます。次の記事ではバックエンド処理プログラムに焦点を当てます。

http://www.bkjia.com/PHPjc/324372.htmlwww.bkjia.com

tru​​ehttp://www.bkjia.com/PHPjc/324372.html技術記事このアプリケーションは、入力単語数のリアルタイム統計を実現し、ajax を介してバックグラウンドと対話して、入力コンテンツをトピック リストに挿入します。この記事では、全体のプロセスを 2 つのパートに分けて説明します...