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を絡めてみようと思います。

関連記事

2013-04-11 JavaScript Comment:0 Trackback:0

このページのトップへ

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

このページのトップへ

コメントの投稿

このページのトップへ