Jquery入門記事一覧
Jquery 入門 その1 要素にアクセスするJquery 入門 その2 要素にアクセスするメソッドJquery 入門 その3 メソッドチェーンJquery 入門 その4 プラグイン（$.fn.extend）の作り方Jquery 入門 その5 プラグイン（$.extend）のサンプルJquery 入門 その6 イベント処理Jquery 入門 その7 繰り返し処理Jquery 入門 その8 DOMツリーへのアクセスを意識するJquery 入門 その9 非同期通信で用いるデータJquery 入門 その10 非同期通信とはJquery 入門 その11 非同期通信のサンプル1Jquery 入門 その12 非同期通信のサンプル2Jquery 入門 その13 非同期通信のサンプル3 $.post,$.getJquery 入門 その14 非同期通信実践例(formをpostしphpで処理)サンプルのソースコードのダウンロード(下のURLをブラウザで入力してください。)
http://html5.web.fc2.com/jquery_new/jquery_new.zip
---------------------------------------------------------------------
前々回の記事では、loadメソッドを用いた非同期通信、
前回の記事では、$.ajaxを用いた非同期通信のサンプルを挙げました。
今回は、$.get、$.postを用いたサンプルを挙げたいと思います。
今回のサンプル
今回のサンプルは、前回同様、data.xmlを取得して表示しています。
$.ajaxの場合と違い、
成功時の処理しか記述することができません。
また、若干書き方も異なります。
・$.getの記述var url = 'data/data.xml';
var params = '{ id: "1", name: "html5_newbie" }';
$.get(
url,
params,
function(data){
$("item",data).each(function(){
$("#xmlData").append("<dt><a href='"+$("link",this).text()+"'>"+$("title",this).text()+"</a></dt><dd>"+$("description",this).text()+"</dd>");
})
}
);
・$.ajaxの記述$.ajax({
url: 'data/data.xml',
type : "get",
dataType: 'xml',
success : function(data){
$("item",data).each(function(){
$("#xmlData").append("<dt><a href='"+$("link",this).text()+"'>"+$("title",this).text()+"</a></dt><dd>"+$("description",this).text()+"</dd>");
})
},
error : function(){
alert("データを読み込めませんでした");
}
})
$.getの部分を、$.postと書いても、このサンプルは動作します。
