Проблема JavaScript с помощью метода getjson обратного вызова с помощью Django
Я пытаюсь сделать вызов с помощью этого скрипта, но получаю "Uncaught SyntaxError: Unexpected token :"
Я не могу понять, где я ошибаюсь, Я не знаю, может быть, это что-то с моим обратным вызовом. Я отправляю действительный пакет JSON, поэтому я не думаю, что это проблема. В любом случае, вот мой вызов html/jquery:<script>
function loadJSON(){
$.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", function(data){
alert('hey');
$('result').append(data);
alert('hey 2');
$.each(data, function(i, json){});
});
alert('hey 3');
}
</script>
С этой соответствующей функцией в моем представлении django:
def tonight_mobile(request):
callback = request.GET.get('callback', '')
def with_rank(rank, place):
return (rank > 0)
place_data = dict(
Places = [make_mobile_place_dict(request, p) for p in Place.objects.all()]
)
xml_bytes = json.dumps(place_data)
return HttpResponse(xml_bytes, content_type='application/json; charset=utf-8')
Вот мой запрос регистрируется моим сервером (так что я знаю его по крайней мере зайдя так далеко с кодом состояния OK):
"GET /api/0.1/tonight-mobile.json&callback=jsonp1293142434434 HTTP/1.1" 200 167
Отображение этой ошибки в моей консоли javascript:
Uncaught SyntaxError: Unexpected token : tonight-mobile.json&callback=jsonp1293142434434:1
Если вам нужно увидеть мой формат JSON (если это то, что вызывает это), пожалуйста, дайте мне знать, и я могу опубликовать его тоже.
Заранее благодарю вас за помощь!
Обновление:
Вот ответ, пришедший с моего сервера:
{"Places": [{"url": "http://localhost:8000/api/0.1/places/1.plist", "image_url": "http://localhost:8000/static/place_logos/Tsonoqua_Mask.gif", "name": "Boo's Place"}]}
[23/Dec/2010 17:37:22] "GET /api/0.1/tonight-mobile.json&callback=jsonp1293147441552 HTTP/1.1" 200 167
Обновление 2:
Мне удалось заставить мой обратный вызов работать правильно! Вот код:
Сторона клиента:
<script>
function loadJSON(){
$.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", logIt(data));
}
function logIt(data){
window.console && console.log(data);
alert('yay!');
}
</script>
Сторона сервера:
def tonight_mobile(request):
callback = request.GET.get('callback', 'logIt')
def with_rank(rank, place):
return (rank > 0)
place_data = dict(
Places = [make_mobile_place_dict(request, p) for p in Place.objects.all()]
)
xml_bytes = json.dumps(place_data)
if callback:
xml_bytes = '%s(%s)' % (callback, xml_bytes)
print xml_bytes
return HttpResponse(xml_bytes, content_type='application/javascript; charset=utf-8')
Это возвращает следующий ответ:
logIt({"Places": [{"url": "http://localhost:8000/api/0.1/places/1.plist", "image_url": "http://localhost:8000/static/place_logos/Tsonoqua_Mask.gif", "name": "Boo's Place"}]})
Так ли она должна функционировать? Похоже, я должен быть в состоянии упростить помощью метода getjson вызов... Я просто хочу убедиться, что я сделал все, что мне нужно, правильно с моим обратным вызовом, прежде чем я продолжу вперед разбор ответа и установку их на элементы на странице.
Обновление 3*
Итак, я сделал довольно много прогресс!! Я использую jQuery mobile, поэтому игнорирую некоторые из следующих перегруженных css, не связанных с основной проблемой.
У меня возникли проблемы с циклическим перебором "мест" в моем пакете JSON. Я получаю ответ с несколькими "местами", но, кажется, не могу понять, как перебирать их. Моя переменная 'i' в каждом цикле корректно работает для первого элемента и отображает его соответствующее имя и изображение.
Мои getJSON и метод обратного вызова эволюционировали в это:
<script>
function loadJSON(){
$.getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", callback(data));
}
function callback(data){
$("#tonight-list").each(data.Places, function(i) {
$(this).append("<li role='option' tabindex='" + data.Places[i] + "' class='ui-li-has-thumb ui-li ui-btn ui-btn-icon-right ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-down-c ui-btn-up-c' data-theme='c'><div class='ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last'><span class='ui-icon ui-icon-arrow-r'></span><div class='ui-btn-text'><img src=" + data.Places[i].image_url + " alt=" + data.Places[i].name + " class='ui-li-thumb ui-corner-tl ui-corner-bl'/><h1 class='list-title ui-li-heading' id='list-title'><a href='detail.html?id=slide' data-transition='slide' class='ui-link-inherit'>" + data.Places[i].name + "</a></h1><span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>" + data.Places[i].events + " events</span></div></div></li>");
});
}
</script>
Вот мой ответ:
callback({"Places": [{"url": "http://localhost:8000/api/0.1/places/3.plist", "image_url": "http://localhost:8000/static/place_logos/Bengals_1.png", "name": "Big 12", "events": 2}, {"url": "http://localhost:8000/api/0.1/places/2.plist", "image_url": "http://localhost:8000/static/place_logos/Makonde_Mask.gif", "name": "Harpo's", "events": 0}, {"url": "http://localhost:8000/api/0.1/places/1.plist", "image_url": "http://localhost:8000/static/place_logos/Quintons_1.png", "name": "Quinton's", "events": 1}]})
Я не путаю, как каждая функция перебирает JSON (которые становятся) объектами Javascript? Я почти уверен, что каждый из них-это моя проблема здесь, так как я получаю только первый элемент списка "места". Может кто-то пожалуйста, помогите мне?
3 ответа:
Да для возврата jsonp вам нужно обернуть ответ в функцию:
def tonight_mobile(request): callback = request.GET.get('callback') def with_rank(rank, place): return (rank > 0) place_data = dict( Places = [make_mobile_place_dict(request, p) for p in Place.objects.all()] ) xml_bytes = json.dumps(place_data) if callback: xml_bytes = '%s(%s)' % (callback, xml_bytes) return HttpResponse(xml_bytes, content_type='application/json; charset=utf-8')
Это выглядит хорошо, вы можете упростить вызов getJSON следующим образом:
function loadJSON(){ var url = "http://localhost:8000/api/0.1/tonight-mobile.json&callback=?"; $.getJSON(url, function(data){ if(data){ console.log(data.name); } }); }
В вашем коде python я бы сделал
callback = request.GET.get('callback')
Вместо
callback = request.GET.get('callback', 'logIt')
Таким образом, если обратный вызов не предусмотрен, вместо jsonp будет возвращен json.