有多种方法可以与“外部”API 进行通信。没有必要使用ajax。 Ajax 仅用于在模板中进行后台调用,触发您想要的任何事件。
但假设您想与 facebook GraphAPI 通信以检索个人资料
http://graph.facebook.com/bill.clinton 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 文件中或模板中的脚本标记之间,您应该会收到一条不错的警报消息:
嗨,我是前总统比尔·克林顿
现在您可以将此警报变成更有意义的内容,并将其放入 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)
现在访问您的网址
作为逻辑结果,也完全有可能通过某些用户操作触发异步事件。例如,前面提到的 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");
}
});
)
// remove the auto call
此外,ajax 调用可以让您执行与 http 请求相同的技巧,您可以将各种请求方法与很酷的 javascript 事件结合使用,例如 beforeSend 事件
beforeSend: function() {
$('#loading').show();
},
#loading 可能类似于:
<div id="loading" style="display:none;">
<img src="{% static "images/loading.gif" %}" />
</div>