Re：zapa氏 今更ですが、jQueryにはまりました

ZAPA氏の記事。
ニュータイプなJSライブラリjQueryを使ってみよう！

これを見てから3日間。
ブログもあまりかけずこればっかりいじって遊んでました。
睡眠時間も1日2時間くらいになり、今日は書こうと思います。

まずZAPA氏、きっかけをありがとう。

私はJavaScriptの知識がほぼ皆無な人間です。
そんな私でもjQueryは簡単に使える為、面白くてはまりました。

ただ、お恥ずかしい話、PHPを使ってJavaScriptをある程度制御しなければ私は使いこなせません。
ですが恐ろしく簡単にこれまでこのブログで紹介してきたようなJavaScriptアプリと同等のものを作れる為、これははまります。

JavaScriptダメダメの私でも出来ました

データベース接続部や、なんやかんやは全てPHPでまかない、動作部分やFormなどはｊQueryに投げる。

こんな方法で色々試して見ましたが、Ajaxをこれまで結構な時間をかけて勉強したものが、ほとんどその知識が要らなくなりました・・・。

Ajaxといえばallaboutで関連記事の連載している高橋 登史朗氏がまっさきに頭に思い浮かびましたが、あの人ほんと涙目だなとか思っていたら、jQueryの魔法 というエントリから始まり、既にｊQueryの初級者向け連載を書き始めていました。

やっぱりその道の人はそれなりに広い視野を持っているんだなと感動しました。

ｊQueryのすすめ

ZAPA氏のブログでは紹介されていなかったんですが、
$("#load").load("load.php");

load()がものすごい素敵。

簡単に説明していきましょう。
まずｊQueryライブラリが無ければ始まりません。
導入については、ZAPA氏のニュータイプなjQueryその2-jQuery導入方法あたりを見てもらえれば、わかりやすいです。

基本的な動作にはある程度決まりがあり、その決まりさえ理解してしまえば、あとはもうなんでもできちゃいました。

クリックされてから呼び出されるわけですが、これだけじゃそんな深い意味は持ってません。

phpとｊQuery

IDをまず決める。（class、htmltag等もありますが、ここでは省略）
<div id="test">ここに出力される</div>

次にボタンなり、リンク何なり、アクションを起こす為のものを用意する。
<input name="btn1" type="button" value="ボタン" id="a1">

最後にスクリプト
<script type="text/javascript">
$("#a1").click(function (){
var ids = $(this).attr("id");
$("#test").load("load.php?id=" + ids);
});
</script>

こうすると、load.php?id=a1という状態で呼び出しが可能です。

簡略解説

$("#a1").click(function (){
#というのはidを示しています。
.click(function ()はくりっくされたら・・・です。

つまりid=1のボタンがクリックされたことで
var ids = $(this).attr("id");
idsに対してidの中身を導入し
$("#test").load("load.php?id=" + ids);
先に記述したdiv id="test"の中に、load.php?id=a1の処理結果を入れます。

恐ろしく説明が下手ですいません。

たったこれだけの動作でも、これまで苦労してきたものが一体なんだったのか疑ってしまうほど簡単な記述ですんじゃいました。

で、どこがPHPなのよとなると、呼び出された側、GETで呼び出してくれるならPHPでいくらでも、様々な処理をさせる事が出来ます。
このあたりが素敵です。

出力する場所は別にdivと決まっているわけではありません。
<input type="text" id="test">
input typeテキストでも、idを振っておけばそこに挿入できます。

この場合
$("#test").load("load.php?id=" + ids);
ではなく、
$("#test").val("挿入する文字");

こうしておけば文字がテキストボックスの中にポンと入ります。

魅力的なのはたった数行で終わるところ。

ためしに社内ローカルで動いているグループウェアに様々な機能を付けてみましたが、いろんな事が出来ました

とりあえず動画でこんなのもできましたと言うのを。


北海道旭川市からの各市町村への距離を検索するもの。
ひらがなが入力されたら、データベースからその文字に一致するものを、その場で表示するというものです。

社内ローカルデータベースと連動しているので、サンプル表示用に作るのが面倒な為、動画で表示しています。めんどくさがり屋ですいません。

こんなのを2時間くらいで作れてしまうｊQueryライブラリ。

$("#forms3").keyup(function () {
var value = $(this).val();
$("#forms4").val("load.php?key=" + value);
}).keyup();

テキストボックスにforms3という名前を付けていて、そこが入力されたかどうかをkeyupで常に見続けています。
なんらかの文字が入力された場合、その結果をload.phpに対してGET送信し、これを元にPHPからデータベースにアクセス。
<div id=forms4></div>にprintで出力したものが挿入されているというものです。

補足
全角文字はGET送信した内容が文字化けしたりします。

本来は送信する前にPHPにて
urlencode($h);
などでエンコードし、受け取る場合は
urldecode($h);
すれば問題ないのですが、最悪受け取るPHP側で変数をエスケープしたのち以下の記述で文字エンコードを無理やりutf-8にしてあげると直ります。
<?php
$key = mb_convert_encoding($_GET['key'], "UTF-8", "UTF-8, JIS, eucjp-win, sjis-win");
?>

ｊQueryはほんと簡単なので時間短縮をお望みの方にもおすすめです。

私が参考にしたサイト。
API/1.2/Attributes - jQuery JavaScript Library

jQuery リファレンス

ニュータイプなjQueryその3-HTML要素アクセス

jQuery 開発者向けメモ

修正追記
・修正箇所について
コメント、及びトラックバックからありがたいご指摘を頂きました。
di="1"と紹介していたのですが、これでも動作ができてしまう為、そのまま記載しました。
ですが、HTML的にid=　は『アルファベットから始めなければならない』という規則をすっかり無視していたことに気づかせてくれましたので、その部分を修正させていただきました。
bmblog: htmlのid属性はalphabetから。
不出来な私に暖かい言葉をありがとうございました。