Photo by Flickr: josemanuelerre's Photostream
目次
- $.get
- $.post
- $.load
1. $.get
$.get
メソッドで、Ajaxで'/data.json'にGETリクエストを行います。
$.get('/data.json', function(data) { // 成功時に行われる処理 console.log('callback' + data); }) .fail(function(data) { // 失敗時に行われる処理 console.log('Failed'); });
2. $.post
$.post
メソッドで、Ajaxで'/post.php'にPOSTリクエストを行います。
$.post('/post.php', { // 第二引数は、POSTするパラメータ title: 'Post Title', body: 'Post Content' }, function(data) { // 成功時に行われる処理 console.log('callback' + data); }) .fail(function(data) { // 失敗時に行われる処理 console.log('Failed'); });
3. $.load
$.load
はHTMLを読み込み、DOMに挿入します。
なんどload()
を実行してもappend()
のように要素は追加されません。
$(document).ready(function(){ // イベント処理の登録 $("#todo-list").on("click", function() { loadTodos( $(this) ); }); // 指定したエレメントにTodoをロードする // 第一引数 : HTMLを読み込むURL // 第二引数 : パラメータ。指定するとPOSTメソッドになる。 // GETでパラメータを渡したい場合はURLにクエリストリング(?id=xxx&q=yyy)で指定する(省略化) // 第三引数:通信完了後に実行されるコールバック var loadTodos = function (element) { element.load("/todos/index.html", function() { // 通信完了時のコールバック関数 }); }; });
Ajax時にURLが変わらないので、ブラウザの戻るや進むボタンが使いづらいという問題があります。
それを解決する方法として、PJAXという解決策があります。
参考文献
- 独習JavaScript 第2版
- jQuery API Documentation