スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

jQueryのajaxを使ってみる

さっそく、試しに使ってみようと思います。

view.phpのお気に入りに追加ボタンがわかりやすいので、ajaxにして画面遷移無しにしてみましょう。さっそくソースから。

view.php

<?php
$body = "<iframe src='http://flashservice.xvideos.com/embedframe/" . $_GET['video'] . "'";
$body .= " frameborder=0 width='600' height='480' scrolling=no></iframe>";
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>動画内容</title>
</head>
<body>
<?php
echo $body;
?>
<br/>
<input type="button" id="addDB" value="お気に入りに追加" />
<div id="res">結果がここに表示されます。</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#addDB").click(function () {
$.ajax({
url: 'db_add.php',
type: 'GET',
data: {
vurl:"<?= $_GET['video'] ?>",
thum:"<?= $_GET['thum'] ?>"
},
dataType: 'html'
})
.done(function(data) {
$("#res").html(data);
});
return false;
});
});
</script>
</body>
</html>

ざっくりと説明します。
お気に入りに追加が、form + submitから、buttonになりました。
そして、id="addDB"を追加してます。

その後、Javascriptでid="addDB"をクリックした際の処理を指定してます。

$("#addDB").click(function () {
// 処理
});

という部分ですね。

$(XXX)

で、XXX部分にCSSみたいにタグを指定すると、その部分の要素が取得出来ます。この要素のことを、DOMって言ったりします。DOMとは、タグ等の要素にアクセスしたり編集したりする仕組みです。

取得したDOMの、click動作を変更してます。クリックですね。
functionは関数です。ここに処理を書きます。

function(引数) {
 // 処理
}

という形で、戻り値は関数自体になります。ちょっと分かりにくいので簡単に説明すると、

var aaa = function() { alert("aaa"); return "xxx"; }

とすれば、aaaには関数が入ります。関数の戻り値"xxx"とは違います。

var bbb = aaa();

で、aaaの処理を実行してbbbに"xxx"が入ります。
なので、丁寧に書けば、

var click_syori = function() { xxxx; }
$("button").click(click_syori);

です。
長くなりましたが、要は略してますってことです。Javascriptはよく略します。テキストだってデータなので、短いほうが転送量は小さく、表示が早くなります。ブラウザの処理速度的にも良い場合が多いです。詳しくは機会があればいつか解説しようと思います。

ajaxの部分は特に新しいことはありません。

$("#res").html(data);

の部分は、id="res"のhtmlを書き換えてます。

最後にreturn false;としているのは、通常のクリック動作は「しないで」とお願いしてると思って下さい。今回のは通常のクリック動作の前に処理を入れていて、return trueにすれば通常のクリック動作が行われます。

http://localhost/test/list.php

から、動画を選択した後のview.phpでお気に入り追加してみましょう。
画面遷移が無くなったことが分かります。

次回は少しbootstrapを絡めてみようと思います。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。