有几种方式可以与“外部”API进行通信。没有必要使用ajax。Ajax只是用于在模板中进行后台调用,触发您想要的任何事件。
但假设您想要与Facebook GraphAPI通信以检索个人资料
http://graph.facebook.com/bill.clinton
标准结果被序列化为JSON,可以轻松地实现到AJAX或任何JavaScript库中,因此称为JavaScript对象表示法。
因此,使用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文件中或在模板中script标签之间,您应该会收到一个不错的警报消息:
嗨,我是前总统比尔·克林顿
现在您可以将此警报转换为更有意义的内容,并将其放置在h1标签中(不确定为什么这很重要)
$("body").html("<h1>"+data.name+"</h1>");
但有时您可能希望在应用程序的服务器端检索数据并进行一些操作。
因此,请创建Django的URL模式和视图,例如:
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()
return HttpResponse(simplejson.dumps(json), mimetype="application/json")
url("^call_bill_clinton/$", call_bill)
现在访问您的网址
作为逻辑结果,也完全可以通过某些用户操作触发异步事件。例如,在先前提到的ajax示例中,URL参数也可以是django URL,例如“/call_bill_clinton/”。
<!-- 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");
}
});
)
此外,Ajax调用让您可以像HTTP请求一样进行魔法操作,您可以结合各种请求方法和酷炫的JavaScript事件使用,例如beforeSend事件。
beforeSend: function() {
$('#loading').show();
},
其中 #loading 可能是类似以下内容:
<div id="loading" style="display:none;">
<img src="{% static "images/loading.gif" %}" />
</div>