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>
