「外部」APIと通信する方法はいくつかあります。ajaxの必要はありません。Ajaxは、テンプレートでバックグラウンド呼び出しを行うためのものであり、考えているイベントをトリガーします。
しかし、FacebookGraphAPIと通信してプロファイルを取得したいとします。
http://graph.facebook.com/bill.clinton
標準の結果はJSONとしてシリアル化され、AJAXまたは任意のJavaScriptライブラリに簡単に実装できるため、JavaScriptObjectNotationという名前が付けられています。
したがって、AJAXの例は次のようになります。
function callFacebook() {
$.ajax({
type: "GET",
data: ({}),
dataType: 'json',
url: "http://graph.facebook.com/bill.clinton",
success: function(data){
alert("Hi I am former "+data.name);
}
});
}
callFacebook();
これをjavascriptファイルまたはテンプレート内のスクリプトタグの間に含めると、すばらしいアラートメッセージが表示されます。
こんにちは私はビル・クリントン前大統領です
これで、このアラートをより意味のあるものに変えて、h1タグ内に配置できます(なぜこれが意味があるのかわかりません)
$("body").html("<h1>"+data.name+"</h1>");
ただし、データを取得して、アプリケーションのサーバー側で何かを実行したい場合があります。
したがって、djangoのurlpatternとビューを作成します。例:
from urllib2 import urlopen
from django.http import HttpResponse
from django.utils import simplejson
def call_bill(request):
url = "http://graph.facebook.com/bill.clinton"
json = urlopen(url).read()
# do whatever you want
return HttpResponse(simplejson.dumps(json), mimetype="application/json")
# add this to your url patterns
url("^call_bill_clinton/$", call_bill)
今あなたのURLをご覧ください
論理的な結果として、ユーザーの操作によって非同期イベントをトリガーすることも完全に可能です。たとえば、前述のajaxの例のURLパラメータは、「/call_bill_clinton/」のようなdjangoURLにすることもできます。
<!-- add a button to call the function -->
<button onclick="callFacebook();">Call Bill</button>
function callFacebook() {
$.ajax({
type: "GET",
data: ({}),
dataType: 'json',
url: "/call_bill_clinton/",
success: function(data){
alert("Hi I am former "+data.name+" and I came from Django");
}
});
)
// remove the auto call
さらに、ajax呼び出しを使用すると、httpリクエストと同じトリックを実行できます。さまざまなリクエストメソッドを、beforeSendイベントなどのクールなJavaScriptイベントと組み合わせて使用できます。
beforeSend: function() {
$('#loading').show();
},
#loadingは次のようになります。
<div id="loading" style="display:none;">
<img src="{% static "images/loading.gif" %}" />
</div>