Ajax
未来電子
Photo@n_oshiumi

Ajaxのloadとgetを勉強した

Ajax未来電子

jQueryを勉強してきたので、Ajaxをマスターしたいっ！！
今のところさっぱり意味が分からないので、勉強しました。

Ajaxとは

ページの一部だけを書き換えることを指します。
Google Mapとかそうですよね

.load

loadはサーバー側の情報を読み込むものです。

例えば、
ボタンを押したら、サーバーにある別のファイル(hello.html)を読み込みたい場合
この場合、divの中にhello.htmlの要素が挿入されます。

index.html
<button>こんにちは</button>
<div id="hello"></div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('button').click(function() {
                $('#hello').load('hello.html');
            });
        });
    </script>
})

Ajaxは非同期通信なので、サーバーと通信する前に実行されることに注意しましょう。
上記のindex.htmlで、hello.htmlが実行された後に、さらに何か実行したい場合はloadの第二引数に関数をとります。

index.html
<button>こんにちは</button>
    <div id="hello"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('button').click(function() {
                $('#hello').load('hello.html', function() {
                    $('#hello').css('color', 'red');
                });
            });
        });
    </script>
</body>

.get

取得したデータを加工して反映させたい場合は、getとpostがあります。
ここでは、getをみていきましょう。

$('').get('ファイル名', {パラメータ}function() {実行する内容});

このように書いていきます。

index.html
<input type="text" name="name" id="name">
<button>登録</button>
    <div id="hello"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('button').click(function() {
                $('#hello').get('hello.php', {     
                     name: $('#name').val()          //#nameの内容をhello.phpに送信
                 },function() {
                      $('#hello').html();　　　//hello.phpから帰ってきた値を、#helloに記す
                });
            });
        });
    </script>
</body>
Edit request
1