ブラウザからアクセスするとちゃんと返ってくるのに、
「$.getJSON」や「$.ajax」を使うとHTTPレスポンス200なのにエラーが返ってくる現象に出くわした。
しばらく悩んでたらajaxのポリシーでクロスドメインにアクセスするときはjsonpを使う必要があるようだった。
どういったものなのかというと、通常はjsonそのまま渡すのに対して、
jsonpは、queryに書かれたcallback名で囲ってapplication/javascriptで返すようになる。
jsonの場合
http://127.0.0.1/sample/
{data1:1, data2:"hello"}
jsonpの場合
http://127.0.0.1/sample/?callback=jsonp_1234&_=2345
jsonp_12345({data1:1, data2:"hello"});
実装方法は下にまとめてみた。
まずはjavascript側から
$.getJSON('http://127.0.0.1/sample/?callback=?', function(data){console.dir(data);});
$.ajax({url:'http://127.0.0.1/sample/', dataType='jsonp', success: function(data){console.dir(data);});
次にサーバ側(django)もjsonpに対応
def JSONP(f):
"""
Usage:
@JSONP
def func(request):
dic = { 'data1': 1, 'data2': 'hello'}
return dic
"""
def _func(*args, **kwargs):
request = args[0]
callback = request.GET.get('callback', None)
dic = f(request)
ret = json.dumps(dic)
if callback is None:
ct = 'application/json'
else:
ret = '%s(%s);' % (callback, ret)
ct = 'application/javascript'
return HttpResponse(ret, mimetype=ct)
return _func
0 件のコメント:
コメントを投稿