zoukankan      html  css  js  c++  java
  • Javascript getJSON issue using Django callback

    am trying to make a call with this script, but am getting a "Uncaught SyntaxError: Unexpected token :"

    I can't figure out where I'm going wrong, I don't know if it's something with my callback. I am sending a valid JSON packet so I don't think that's the issue. Anyway, here's my html/jquery call:

    <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>

    With this corresponding function in my django view:

    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 inPlace.objects.all()]
       
    )

        xml_bytes
    = json.dumps(place_data)
       
    returnHttpResponse(xml_bytes, content_type='application/json; charset=utf-8')

    Here is my request being logged by my server (so I know its at least getting that far with a OK status code):

    "GET /api/0.1/tonight-mobile.json&callback=jsonp1293142434434 HTTP/1.1"200167

    Displaying this error in my javascript console:

    UncaughtSyntaxError:Unexpected token : tonight-mobile.json&callback=jsonp1293142434434:1

    If you need to see my JSON format (if that is what's causing this) please let me know and I can post it too.

    Thank you in advance for your help!


    UPDATE:

    Here's the response coming from my server:

    {"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/201017:37:22]"GET /api/0.1/tonight-mobile.json&callback=jsonp1293147441552 HTTP/1.1"200167

    UPDATE 2:

    I've managed to get my callback working correctly! Here's the code:

    Client side:

    <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>

    Server side:

    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 inPlace.objects.all()]
       
    )

        xml_bytes
    = json.dumps(place_data)

       
    if callback:
            xml_bytes
    ='%s(%s)'%(callback, xml_bytes)
       
    print xml_bytes

       
    returnHttpResponse(xml_bytes, content_type='application/javascript; charset=utf-8')

    This returns the following response:

    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"}]})

    Is this how it should function? It seems I should be able to simplify the getJSON call... I just want to make sure I've done everything I need to correctly with my callback before I continue forward parsing the response and setting them to elements on the page.


    UPDATE 3*

    So, I've made quite some progress!! I'm using Jquery mobile, so ignore some of the following overdone css, its not related to the core issue.

    I'm having a problem looping over the "Places" in my JSON packet. I am getting a response with multiple "Places", but can't seem to figure out how to iterate over them. My 'i' variable in my each loop is working correctly for the first element, and displaying its corresponding name & image.

    My getJSON and callback method have evolved into this:

    <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>

    Here's my response:

    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}]})

    Am I confusing how the each function iterates over the JSON (which become) Javascript objects? I am pretty sure the each is my issue here, as I am only getting the FIRST element of the "Places" list. Can someone please help me out?

  • 相关阅读:
    CSS3 GENERATOR可以同时为一个元素完成border-radius、box-shadow、gradient和opacity多项属性的设置
    CSS3 Maker提供了10个最为常用的CSS3属性在线生成工具
    CSS3 Generator提供了13个CSS3较为常用的属性代码生成工具,而且可以通过这款工具除了在线生成效果代码之外,还可以实时看到你修改的效果,以及浏览器的兼容性。
    Westciv Tools主要为CSS3提供了渐变gradients、盒子阴影box-shadow、变形transform和文字描边四种在线生成效果的工具
    Screensiz.es站收集整理了移动端的相关尺寸。
    ColorCode是一个在线随机取色工具,可以随机获取十六进制、RGB、HSl等颜色。
    Long Shadows Generate是一款在线使用纯CSS3实现长阴影的效果,一款强大的扁平化长投影制造器。
    FilterFactory是一款将图片转换成SVG的在线生成工具。
    CREATE CSS3是一款在线集成众多CSS3功能的生成器,可以在线生成常用的CSS3效果
    Android开发系列(十六) QQ聊天界面完整版——整合气泡、表情、历史表情等功能
  • 原文地址:https://www.cnblogs.com/mfryf/p/2347937.html
Copyright © 2011-2022 走看看