先日Ajaxを使って画面遷移しないでFormデータをPOSTすると言う記事を書きました。
Formの場合は大よそあれで良いんですけど例えばGETでしかデータを作れない場合とか
複数のFormになってしまってコードの量が膨大になってしまいそうな時などはGETでデータを渡した方が使いやすいですよね
AJAXでGET使いたい！
画面遷移してもう一度元の画面に戻るのにデータ読み込みが非常に時間が掛かるような処理の場合もAjaxで内容を送って非同期処理した方が早いし便利です。
今回私がAJAXでGET使いたい！って思った場面は以下の様な場面でした。
上記のような場合ですね、TwitterAPIを使って片想い一覧を出すのに相当時間が掛かるので表示するだけでも5秒近くも掛かってしまいます。
フォローやフォロワーが多ければそれに比例して時間が掛かってしまいますので1人フォローを解除する度にこの画面に戻ってくるのは非常に非効率だといえますし待ってられません。
なので、unfollowをクリックした時にデータだけunfollowの処理に送って次々に処理を行いたいのです。
先日の記事では残念ながら要件を満たさないと思います。ってか満たさなかったのでGETで何とかうまく出来ないものか？と思案してGoogle先生に聞いてみた所、意外とあっさりJQueryの公式に簡単ではありますが掲載されていました。
AJAX.GET送信サンプルコード
$.get("test.cgi", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});そう！まさにコレ！ヤリたかった事はコレなのです！
色々Google先生に聞いてみてたんですが、イマイチ良い記事を見つけられなかったので個人的にメモしようと思った次第で御座います。
しかし、上記だけでは要件を満たさないし不完全な記事と言う事になってしまうので、JQuery公式さんのコードを参考に更に追加してみました。
<script>
$(function() {
$('a.born').on('click', function(e) {
var getin = $(this).attr("ref");
var scnane = $(this).attr("scn");
$(this).parent().parent().remove();
$.get("unfollow.php", { jet: getin, scn: scnane },
function(data){
$('#result').html(data);
});
});
});
</script>コードの解説
まずa.bornと言うのは先程の画像で言うunfollowのボタンのクラスとして指定しています。
何故IDを使わなかったの？と疑問に思う方もいるかも知れませんが同じボタンが連続で並ぶ場合、IDと言うのは１つのHTML内で1回しか使えませんからClassにしたわけですし、ID1 ID2 ID3とForeachでグルグル周るようにしても良かったのですが余計な手間になってしまいますから、Classにしました。
DOMデータの取得
そしてunfollowのボタンにはそれぞれ属性が仕込まれています。
ソースを見て貰ったらわかると思いますが .attr(“ref”) の部分です。
属性は自分の好きに付けて貰って構いませんし取得の方法もJQueryなら簡単です。
var 変数名 = $(this).attr("アンカーに設定した属性値");
// HTML側では
<a href="javascript:void(0)" ref="値" class="born" scn="値2">unfollow</a>と言う具合になります。
HTML側でも簡単に設定出来ますからお手軽です。
クリックされたボタンの削除
そしてSCNとREFの値を取得出来たら要素の削除が必要になります。
ボタンを削除しなきゃ押したかどうかわからなくなってしまいますので。
$(this).parent().parent().remove();
remove();はJQueryの基本ですね要素の削除です。
そしてthisは押されたボタンを指しますから同じボタンが複数並んでる時に有効です。
私のコーディングの場合はテーブルで
th ユーザー名 td Gotwitterボタン td unfolloボタン
とコーディングしていますから、親要素を指定する .parent() をメソッドチェーンで指定しています。
TDの親要素、つまりTRを根こそぎ削除しますよと言う命令になり実際にボタンを押すと削除されました。
データをGETで送信する部分
そして次の行でいよいよデータ送信です。
$.get("unfollow.php", { jet: getin, scn: scnane }unfollow.phpへjetと言う変数とscnと言う変数を送信しています。
unfollow.php?jet=取得した値1&scn=取得した値2
と言う形でデータが送られると言う訳です。
返り値については
$('#result').html(data);
// HTML側で以下を記述しておきます。
<div id="result"></div>GETで送信した結果がHTML側のDOMに追加されて結果が表示されて終了です。
筆者のおすすめ本
 | jQuery最高の教科書 株式会社シフトブレイン SBクリエイティブ 2013-11-26
|
コメント